mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
update website
This commit is contained in:
1 parent
8f4db93a94
commit
963422fad1
48 files changed
+528
-1654
No files matched your search
@@ -1,12 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="active" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
(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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-15
@@ -1,15 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="active" href="/react-native/dLine truncated
|
||||
text: ?string;
|
||||
onPress: ?Function;
|
||||
}>)</span> <a class="hash-link" href="#alert">#</a></h4></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="animation.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-14
@@ -1,14 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
LICENSE file in the root directory of this source tree. An additional grant
|
||||
of patent rights can be found in the PATENTS file in the same directory.</p><p>@flow</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="startanimation"></a><span class="propType">static </span>startAnimation<span class="propType">(node: any, duration: number, delay: number, easing: (string | EasingFunction), properties: {[key: string]: any})</span> <a class="hash-link" href="#startanimation">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stopanimation"></a><span class="propType">static </span>stopAnimation<span class="propType">(tag: number)</span> <a class="hash-link" href="#stopanimation">#</a></h4></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="appregistry.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-18
@@ -1,18 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
root components should register themselves with
|
||||
<code>AppRegistry.registerComponent</code>, then the native system can load the bundle
|
||||
for the app and then actually run the app when it's ready by invoking
|
||||
<code>AppRegistry.runApplication</code>.</p><p><code>AppRegistry</code> should be <code>require</code>d early in the <code>require</code> sequence to make
|
||||
sure the JS execution environment is setup before other modules are
|
||||
<code>require</code>d.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="registerconfig"></a><span class="propType">static </span>registerConfig<span class="propType">(config: Array<AppConfig>)</span> <a class="hash-link" href="#registerconfig">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="registercomponent"></a><span class="propType">static </span>registerComponent<span class="propType">(appKey: string, getComponentFunc: Function)</span> <a class="hash-link" href="#registercomponent">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="registerrunnable"></a><span class="propType">static </span>registerRunnable<span class="propType">(appKey: string, func: Function)</span> <a class="hash-link" href="#registerrunnable">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="runapplication"></a><span class="propType">static </span>runApplication<span class="propType">(appKey: string, appParameters: any)</span> <a class="hash-link" href="#runapplication">#</a></h4></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="appstateios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-40
@@ -1,40 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
and notify you when the state changes.</p><p>AppStateIOS is frequently used to determine the intent and proper behavior when
|
||||
handling push notifications.</p><h3><a class="anchor" name="ios-app-states"></a>iOS App States <a class="hash-link" href="#ios-app-states">#</a></h3><ul><li><code>active</code> - The app is running in the foreground</li><li><code>background</code> - The app is running in the background. The user is either
|
||||
in another app or on the home screen</li><li><code>inactive</code> - This is a transition state that currently never happens for
|
||||
typical React Native apps.</li></ul><p>For more information, see
|
||||
<a href="https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html" target="_blank">Apple's documentation</a></p><h3><a class="anchor" name="basic-usage"></a>Basic Usage <a class="hash-link" href="#basic-usage">#</a></h3><p>To see the current state, you can check <code>AppStateIOS.currentState</code>, which
|
||||
will be kept up-to-date. However, <code>currentState</code> will be null at launch
|
||||
while <code>AppStateIOS</code> retrieves it over the bridge.</p><div class="prism language-javascript">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">return</span> <span class="token punctuation">{</span>
|
||||
currentAppState<span class="token punctuation">:</span> AppStateIOS<span class="token punctuation">.</span>currentState<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>
|
||||
componentDidMount<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>
|
||||
AppStateIOS<span class="token punctuation">.</span><span class="token function">addEventListener<span class="token punctuation">(</span></span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
componentWillUnmount<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>
|
||||
AppStateIOS<span class="token punctuation">.</span><span class="token function">removeEventListener<span class="token punctuation">(</span></span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
_handleAppStateChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>currentAppState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span> currentAppState<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 keyword">return</span> <span class="token punctuation">(</span>
|
||||
<Text<span class="token operator">></span>Current state is<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 punctuation">.</span>currentAppState<span class="token punctuation">}</span><<span class="token operator">/</span>Text<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></div><p>This example will only ever appear to say "Current state is: active" because
|
||||
the app is only visible to the user when in the <code>active</code> state, and the null
|
||||
state will happen only momentarily.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="addeventlistener"></a><span class="propType">static </span>addEventListener<span class="propType">(type: string, handler: Function)</span> <a class="hash-link" href="#addeventlistener">#</a></h4><div><p>Add a handler to AppState changes by listening to the <code>change</code> event type
|
||||
and providing the handler</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeeventlistener"></a><span class="propType">static </span>removeEventListener<span class="propType">(type: string, handler: Function)</span> <a class="hash-link" href="#removeeventlistener">#</a></h4><div><p>Remove a handler by passing the <code>change</code> event type and the handler</p></div></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="asyncstorage.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-23
@@ -1,23 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
system. It should be used instead of LocalStorage.</p><p>It is recommended that you use an abstraction on top of AsyncStorage instead
|
||||
of AsyncStorage directly for anything more than light usage since it
|
||||
operates globally.</p><p>This JS code is a simple facad over the native iOS implementation to provide
|
||||
a clear JS API, real Error objects, and simple non-multi functions.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitem"></a><span class="propType">static </span>getItem<span class="propType">(key: string, callback: (error: ?Error, result: ?string) => void)</span> <a class="hash-link" href="#getitem">#</a></h4><div><p>Fetches <code>key</code> and passes the result to <code>callback</code>, along with an <code>Error</code> if
|
||||
there is any.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setitem"></a><span class="propType">static </span>setItem<span class="propType">(key: string, value: string, callback: ?(error: ?Error) => void)</span> <a class="hash-link" href="#setitem">#</a></h4><div><p>Sets <code>value</code> for <code>key</code> and calls <code>callback</code> on completion, along with an
|
||||
<code>Error</code> if there is any.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeitem"></a><span class="propType">static </span>removeItem<span class="propType">(key: string, callback: ?(error: ?Error) => void)</span> <a class="hash-link" href="#removeitem">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mergeitem"></a><span class="propType">static </span>mergeItem<span class="propType">(key: string, value: string, callback: ?(error: ?Error) => void)</span> <a class="hash-link" href="#mergeitem">#</a></h4><div><p>Merges existing value with input value, assuming they are stringified json.</p><p>Not supported by all native implementations.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="clear"></a><span class="propType">static </span>clear<span class="propType">(callback: ?(error: ?Error) => void)</span> <a class="hash-link" href="#clear">#</a></h4><div><p>Erases <em>all</em> AsyncStorage for all clients, libraries, etc. You probably
|
||||
don't want to call this - use removeItem or multiRemove to clear only your
|
||||
own keys instead.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getallkeys"></a><span class="propType">static </span>getAllKeys<span class="propType">(callback: (error: ?Error) => void)</span> <a class="hash-link" href="#getallkeys">#</a></h4><div><p>Gets <em>all</em> keys known to the system, for all callers, libraries, etc.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="multiget"></a><span class="propType">static </span>multiGet<span class="propType">(keys: Array<string>, callback: (errors: ?Array<Error>, result: ?Array<Array<string>>) => void)</span> <a class="hash-link" href="#multiget">#</a></h4><div><p>multiGet invokes callback with an array of key-value pair arrays that
|
||||
matches the input format of multiSet.</p><p> multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="multiset"></a><span class="propType">static </span>multiSet<span class="propType">(keyValuePairs: Array<Array<string>>, callback: ?(errors: ?Array<Error>) => void)</span> <a class="hash-link" href="#multiset">#</a></h4><div><p>multiSet and multiMerge take arrays of key-value array pairs that match
|
||||
the output of multiGet, e.g.</p><p> multiSet([['k1', 'val1'], ['k2', 'val2']], cb);</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="multiremove"></a><span class="propType">static </span>multiRemove<span class="propType">(keys: Array<string>, callback: ?(errors: ?Array<Error>) => void)</span> <a class="hash-link" href="#multiremove">#</a></h4><div><p>Delete all the keys in the <code>keys</code> array.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="multimerge"></a><span class="propType">static </span>multiMerge<span class="propType">(keyValuePairs: Array<Array<string>>, callback: ?(errors: ?Array<Error>) => void)</span> <a class="hash-link" href="#multimerge">#</a></h4><div><p>Merges existing values with input values, assuming they are stringified
|
||||
json.</p><p>Not supported by all native implementations.</p></div></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="cameraroll.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-21
@@ -1,21 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
LICENSE file in the root directory of this source tree. An additional grant
|
||||
of patent rights can be found in the PATENTS file in the same directory.</p><p>@flow</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="saveimagewithtag"></a><span class="propType">static </span>saveImageWithTag<span class="propType">(tag: string, successCallback, errorCallback)</span> <a class="hash-link" href="#saveimagewithtag">#</a></h4><div><p>Saves the image with tag <code>tag</code> to the camera roll.</p><p>@param {string} tag - Can be any of the three kinds of tags we accept:
|
||||
1. URL
|
||||
2. assets-library tag
|
||||
3. tag returned from storing an image in memory</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getphotos"></a><span class="propType">static </span>getPhotos<span class="propType">(params: object, callback: function, errorCallback: function)</span> <a class="hash-link" href="#getphotos">#</a></h4><div><p> Invokes <code>callback</code> with photo identifier objects from the local camera
|
||||
roll of the device matching shape defined by <code>getPhotosReturnChecker</code>.</p><p> @param {object} params - See <code>getPhotosParamChecker</code>.
|
||||
@param {function} callback - Invoked with arg of shape defined by
|
||||
<code>getPhotosReturnChecker</code> on success.
|
||||
@param {function} errorCallback - Invoked with error message on error.</p></div></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="interactionmanager.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-20
@@ -1,20 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
a controlled component, so you must hook in to the <code>onDateChange</code> callback
|
||||
and update the <code>date</code> prop in order for the component to update, otherwise
|
||||
the user's change will be reverted immediately to reflect <code>props.date</code> as the
|
||||
source of truth.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="date"></a>date <span class="propType">Date</span> <a class="hash-link" href="#date">#</a></h4><div><p>The currently selected date.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumdate"></a>maximumDate <span class="propType">Date</span> <a class="hash-link" href="#maximumdate">#</a></h4><div><p>Maximum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumdate"></a>minimumDate <span class="propType">Date</span> <a class="hash-link" href="#minimumdate">#</a></h4><div><p>Minimum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minuteinterval"></a>minuteInterval <span class="propType">enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)</span> <a class="hash-link" href="#minuteinterval">#</a></h4><div><p>The interval at which minutes can be selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a>mode <span class="propType">enum('date', 'time', 'datetime')</span> <a class="hash-link" href="#mode">#</a></h4><div><p>The date picker mode.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondatechange"></a>onDateChange <span class="propType">function</span> <a class="hash-link" href="#ondatechange">#</a></h4><div><p>Date change handler.</p><p>This is called when the user changes the date or time in the UI.
|
||||
The first and only argument is a Date object representing the new
|
||||
date and time.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="timezoneoffsetinminutes"></a>timeZoneOffsetInMinutes <span class="propType">number</span> <a class="hash-link" href="#timezoneoffsetinminutes">#</a></h4><div><p>Timezone offset in minutes.</p><p>By default, the date picker will use the device's timezone. With this
|
||||
parameter, it is possible to force a certain timezone offset. For
|
||||
instance, to show times in Pacific Standard Time, pass -7 * 60.</p></div></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="image.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-12
@@ -1,12 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
(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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-12
@@ -1,12 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
(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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-17
@@ -1,17 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
You need to add NSLocationWhenInUseUsageDescription key
|
||||
in Info.plist to enable geolocation, otherwise it's going
|
||||
to <em>fail silently</em>!
|
||||
!/ !/</p><p>Geolocation follows the MDN specification:
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation">https://developer.mozilla.org/en-US/docs/Web/API/Geolocation</a></p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="getcurrentposition"></a><span class="propType">static </span>getCurrentPosition<span class="propType">(geo_success: Function, geo_error?: Function, geo_options?: Object)</span> <a class="hash-link" href="#getcurrentposition">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="watchposition"></a><span class="propType">static </span>watchPosition<span class="propType">(success: Function, error?: Function, options?: Object)</span> <a class="hash-link" href="#watchposition">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="clearwatch"></a><span class="propType">static </span>clearWatch<span class="propType">(watchID: number)</span> <a class="hash-link" href="#clearwatch">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stopobserving"></a><span class="propType">static </span>stopObserving<span class="propType">()</span> <a class="hash-link" href="#stopobserving">#</a></h4></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="network.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
@@ -1,12 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
(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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-12
@@ -1,12 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="active" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
(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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-45
@@ -1,45 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
including network images, static resources, temporary local images, and
|
||||
images from local disk, such as the camera roll.</p><p>Example usage:</p><div class="prism language-javascript">renderImages<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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Image
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>icon<span class="token punctuation">}</span>
|
||||
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">'image!myIcon'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<Image
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>logo<span class="token punctuation">}</span>
|
||||
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'http://facebook.github.io/react/img/logo_og.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 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></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#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="#accessibilitylabel">#</a></h4><div><p>accessibilityLabel - Custom string to display for accessibility.</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="#accessible">#</a></h4><div><p>accessible - Whether this element should be revealed as an accessible
|
||||
element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="capinsets"></a>capInsets <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="#capinsets">#</a></h4><div><p>capInsets - When the image is resized, the corners of the size specified
|
||||
by capInsets will stay a fixed size, but the center content and borders
|
||||
of the image will be stretched. This is useful for creating resizable
|
||||
rounded buttons, shadows, and other resizable assets. More info:</p><p> <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets">https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets</a>:</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="source"></a>source <span class="propType">{uri: string}</span> <a class="hash-link" href="#source">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderRadius <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">resizeMode <span class="propType">Object.keys(ImageResizeMode)</span></h6></div><div class="prop"><h6 class="propTitle">tintColor <span class="propType">string</span></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="#testid">#</a></h4><div><p>testID - A unique identifier for this element to be used in UI Automation
|
||||
testing scripts.</p></div></div></div></div><div><p>Displaying images is a fascinating subject, React Native uses some cool tricks to make it a better experience.</p><h2><a class="anchor" name="no-automatic-sizing"></a>No Automatic Sizing <a class="hash-link" href="#no-automatic-sizing">#</a></h2><p>If you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.</p><p>In React Native, this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or just aspect ratio) of the image in advance, but we believe that it leads to a better user experience.</p><h2><a class="anchor" name="background-image-via-nesting"></a>Background Image via Nesting <a class="hash-link" href="#background-image-via-nesting">#</a></h2><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, simply create a normal <code><Image></code> component and add whatever children to it you would like to layer on top of it.</p><div class="prism language-javascript"><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 punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>Inside<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Image<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="off-thread-decoding"></a>Off-thread Decoding <a class="hash-link" href="#off-thread-decoding">#</a></h2><p>Image decoding can take more than a frame-worth of time. This is one of the major source of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change.</p><h2><a class="anchor" name="static-assets"></a>Static Assets <a class="hash-link" href="#static-assets">#</a></h2><p>In the course of a project, it is not uncommon to add and remove many images and accidentally end up shipping images you are no longer using in the app. In order to fight this, we need to find a way to know statically which images are being used in the app. To do that, we introduced a marker on require. The only allowed way to refer to an image in the bundle is to literally write <code>require('image!name-of-the-asset')</code> in the source.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// GOOD
|
||||
</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">'image!my-icon'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
// BAD
|
||||
</span><span class="token keyword">var</span> icon <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>active <span class="token operator">?</span> <span class="token string">'my-icon-active'</span> <span class="token punctuation">:</span> <span class="token string">'my-icon-inactive'</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">'image!'</span> <span class="token operator">+</span> icon<span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
// GOOD
|
||||
</span><span class="token keyword">var</span> icon <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>active <span class="token operator">?</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'image!my-icon-active'</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'image!my-icon-inactive'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<Image source<span class="token operator">=</span><span class="token punctuation">{</span>icon<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><p>When your entire codebase respects this convention, you're able to do interesting things like automatically packaging the assets that are being used in your app. Note that in the current form, nothing is enforced, but it will be in the future.</p><h2><a class="anchor" name="best-camera-roll-image"></a>Best Camera Roll Image <a class="hash-link" href="#best-camera-roll-image">#</a></h2><p>iOS saves multiple sizes for the same image in your Camera Roll, it is very important to pick the one that's as close as possible for performance reasons. You wouldn't want to use the full quality 3264x2448 image as source when displaying a 200x200 thumbnail. If there's an exact match, React Native will pick it, otherwise it's going to use the first one that's at least 50% bigger in order to avoid blur when resizing from a close size. All of this is done by default so you don't have to worry about writing the tedious (and error prone) code to do it yourself.</p><h2><a class="anchor" name="source-being-an-object"></a>Source being an object <a class="hash-link" href="#source-being-an-object">#</a></h2><p>In React Native, one interesting decision is that the <code>src</code> attribute is named <code>source</code> and doesn't take a string but an object with an <code>uri</code> attribute.</p><div class="prism language-javascript"><Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'something.jpg'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><p>On the infrastructure side, the reason is that it allows to attach metadata to this object. For example if you are using <code>require('image!icon')</code>, then we add an <code>isStatic</code> attribute to flag it as a local file (don't rely on this fact, it's likely to change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting <code>{uri: ...}</code>, we can output <code>{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}}</code> and transparently support spriting on all the existing call sites.</p><p>On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.</p></div><div class="docs-prevnext"><a class="docs-next" href="listview.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
@@ -1,24 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
interactions/animations have completed. In particular, this allows JavaScript
|
||||
animations to run smoothly.</p><p>Applications can schedule tasks to run after interactions with the following:</p><div class="prism language-javascript">InteractionManager<span class="token punctuation">.</span><span class="token function">runAfterInteractions<span class="token punctuation">(</span></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 comment" spellcheck="true"> // ...long-running synchronous task...
|
||||
</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Compare this to other scheduling alternatives:</p><ul><li>requestAnimationFrame(): for code that animates a view over time.</li><li>setImmediate/setTimeout(): run code later, note this may delay animations.</li><li>runAfterInteractions(): run code later, without delaying active animations.</li></ul><p>The touch handling system considers one or more active touches to be an
|
||||
'interaction' and will delay <code>runAfterInteractions()</code> callbacks until all
|
||||
touches have ended or been cancelled.</p><p>InteractionManager also allows applications to register animations by
|
||||
creating an interaction 'handle' on animation start, and clearing it upon
|
||||
completion:</p><div class="prism language-javascript"><span class="token keyword">var</span> handle <span class="token operator">=</span> InteractionManager<span class="token punctuation">.</span><span class="token function">createInteractionHandle<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
|
||||
// run animation... (`runAfterInteractions` tasks are queued)
|
||||
</span><span class="token comment" spellcheck="true">// later, on animation completion:
|
||||
</span>InteractionManager<span class="token punctuation">.</span><span class="token function">clearInteractionHandle<span class="token punctuation">(</span></span>handle<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
|
||||
// queued tasks run if all handles were cleared</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="runafterinteractions"></a><span class="propType">static </span>runAfterInteractions<span class="propType">(callback: Function)</span> <a class="hash-link" href="#runafterinteractions">#</a></h4><div><p>Schedule a function to run after all interactions have completed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="createinteractionhandle"></a><span class="propType">static </span>createInteractionHandle<span class="propType">()</span> <a class="hash-link" href="#createinteractionhandle">#</a></h4><div><p>Notify manager that an interaction has started.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="clearinteractionhandle"></a><span class="propType">static </span>clearInteractionHandle<span class="propType">(handle: number)</span> <a class="hash-link" href="#clearinteractionhandle">#</a></h4><div><p>Notify manager that an interaction has completed.</p></div></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="layoutanimation.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-14
@@ -1,14 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
LICENSE file in the root directory of this source tree. An additional grant
|
||||
of patent rights can be found in the PATENTS file in the same directory.</p><p>@flow</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="configurenext"></a><span class="propType">static </span>configureNext<span class="propType">(config: Config, onAnimationDidEnd?: Function, onError?: Function)</span> <a class="hash-link" href="#configurenext">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="create"></a><span class="propType">static </span>create<span class="propType">(duration: number, type, creationProp)</span> <a class="hash-link" href="#create">#</a></h4></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="linkingios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-32
@@ -1,32 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
all those features would impact in the binary size... But we still want to make
|
||||
easy to add these features whenever you need them.</p><p>With that in mind we exposed many of these features as independent static libraries.</p><p>For most of the libs it will be as simples as dragging two files, sometimes a third
|
||||
step will be necessary, but no more than that.</p><p><em>All the libraries we ship with React Native live on the <code>Libraries</code> folder in
|
||||
the root of the repository. Some of them are pure JavaScript, and you just need
|
||||
to <code>require</code> it. Other libraries also rely on some native code, in that case
|
||||
you'll have to add these files to your app, otherwise the app will throw an
|
||||
error as soon as you try to use the library.</em></p><h2><a class="anchor" name="here-the-few-steps-to-link-your-libraries-that-contain-native-code"></a>Here the few steps to link your libraries that contain native code <a class="hash-link" href="#here-the-few-steps-to-link-your-libraries-that-contain-native-code">#</a></h2><h3><a class="anchor" name="step-1"></a>Step 1 <a class="hash-link" href="#step-1">#</a></h3><p>If the library has native code, there must be a <code>.xcodeproj</code> file inside it's
|
||||
folder.
|
||||
Drag this file to your project on Xcode (usually under the <code>Libaries</code> group
|
||||
on Xcode);</p><p><img src="/react-native/img/AddToLibraries.png" alt=""></p><h3><a class="anchor" name="step-2"></a>Step 2 <a class="hash-link" href="#step-2">#</a></h3><p>Click on your main project file (the one that represents the <code>.xcodeproj</code>)
|
||||
select <code>Build Phases</code> and drag the static library from the <code>Products</code> folder
|
||||
insed the Library you are importing to <code>Link Binary With Libraries</code></p><p><img src="/react-native/img/AddToBuildPhases.png" alt=""></p><h3><a class="anchor" name="step-3"></a>Step 3 <a class="hash-link" href="#step-3">#</a></h3><p>Not every library will need this step, what you need to consider is:</p><p><em>Do I need to know the contents of the library at compile time?</em></p><p>What that means is, are you using this library on the native site or just in
|
||||
JavaScript? If you are just using it in JavaScript, you are good to go!</p><p>This step is not necessary for all libraries that we ship we React Native but
|
||||
<code>PushNotificationIOS</code> and <code>LinkingIOS</code>.</p><p>In the case of the <code>PushNotificationIOS</code> for example, you have to call a method
|
||||
on the library from your <code>AppDelegate</code> every time a new push notifiation is
|
||||
received.</p><p>For that we need to know the library's headers. To achieve that you have to go
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search
|
||||
Paths</code>. There you should include the path to you library (if it has relevant
|
||||
files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
|
||||
example).</p><p><img src="/react-native/img/AddToSearchPaths.png" alt=""></p></div><div class="docs-prevnext"><a class="docs-next" href="debugging.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-14
@@ -1,14 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
LICENSE file in the root directory of this source tree. An additional grant
|
||||
of patent rights can be found in the PATENTS file in the same directory.</p><p>@flow</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="addeventlistener"></a><span class="propType">static </span>addEventListener<span class="propType">(type, handler)</span> <a class="hash-link" href="#addeventlistener">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeeventlistener"></a><span class="propType">static </span>removeEventListener<span class="propType">(type, handler)</span> <a class="hash-link" href="#removeeventlistener">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="openurl"></a><span class="propType">static </span>openURL<span class="propType">(url)</span> <a class="hash-link" href="#openurl">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="canopenurl"></a><span class="propType">static </span>canOpenURL<span class="propType">(url, callback)</span> <a class="hash-link" href="#canopenurl">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="popinitialurl"></a><span class="propType">static </span>popInitialURL<span class="propType">()</span> <a class="hash-link" href="#popinitialurl">#</a></h4></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="netinfo.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-64
@@ -1,64 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
scrolling lists of changing data. The minimal API is to create a
|
||||
<code>ListView.DataSource</code>, populate it with a simple array of data blobs, and
|
||||
instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code>
|
||||
callback which takes a blob from the data array and returns a renderable
|
||||
component.</p><p>Minimal example:</p><div class="prism language-javascript">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">ListViewDataSource</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>
|
||||
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">'row 1'</span><span class="token punctuation">,</span> <span class="token string">'row 2'</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>
|
||||
|
||||
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 keyword">return</span> <span class="token punctuation">(</span>
|
||||
<ListView
|
||||
dataSource<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">}</span>
|
||||
renderRow<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>rowData<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <Text<span class="token operator">></span><span class="token punctuation">{</span>rowData<span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></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></div><p>ListView also supports more advanced features, including sections with sticky
|
||||
section headers, header and footer support, callbacks on reaching the end of
|
||||
the available data (<code>onEndReached</code>) and on the set of rows that are visible
|
||||
in the device viewport change (<code>onChangeVisibleRows</code>), and several
|
||||
performance optimizations.</p><p>There are a few performance operations designed to make ListView scroll
|
||||
smoothly while dynamically loading potentially very large (or conceptually
|
||||
infinite) data sets:</p><ul><li><p>Only re-render changed rows - the hasRowChanged function provided to the
|
||||
data source tells the ListView if it needs to re-render a row because the
|
||||
source data has changed - see ListViewDataSource for more details.</p></li><li><p>Rate-limited row rendering - By default, only one row is rendered per
|
||||
event-loop (customizable with the <code>pageSize</code> prop). This breaks up the
|
||||
work into smaller chunks to reduce the chance of dropping frames while
|
||||
rendering rows.</p></li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollview"></a><a href="scrollview.html#proptypes">ScrollView props...</a> <a class="hash-link" href="#scrollview">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datasource"></a>dataSource <span class="propType">ListViewDataSource</span> <a class="hash-link" href="#datasource">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initiallistsize"></a>initialListSize <span class="propType">number</span> <a class="hash-link" href="#initiallistsize">#</a></h4><div><p>How many rows to render on initial component mount. Use this to make
|
||||
it so that the first screen worth of data apears at one time instead of
|
||||
over the course of multiple frames.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchangevisiblerows"></a>onChangeVisibleRows <span class="propType">function</span> <a class="hash-link" href="#onchangevisiblerows">#</a></h4><div><p>(visibleRows, changedRows) => void</p><p>Called when the set of visible rows changes. <code>visibleRows</code> maps
|
||||
{ sectionID: { rowID: true }} for all the visible rows, and
|
||||
<code>changedRows</code> maps { sectionID: { rowID: true | false }} for the rows
|
||||
that have changed their visibility, with true indicating visible, and
|
||||
false indicating the view has moved out of view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreached"></a>onEndReached <span class="propType">function</span> <a class="hash-link" href="#onendreached">#</a></h4><div><p>Called when all rows have been rendered and the list has been scrolled
|
||||
to within onEndReachedThreshold of the bottom. The native scroll
|
||||
event is provided.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreachedthreshold"></a>onEndReachedThreshold <span class="propType">number</span> <a class="hash-link" href="#onendreachedthreshold">#</a></h4><div><p>Threshold in pixels for onEndReached.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pagesize"></a>pageSize <span class="propType">number</span> <a class="hash-link" href="#pagesize">#</a></h4><div><p>Number of rows to render per event loop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews <span class="propType">bool</span> <a class="hash-link" href="#removeclippedsubviews">#</a></h4><div><p>An experimental performance optimization for improving scroll perf of
|
||||
large lists, used in conjunction with overflow: 'hidden' on the row
|
||||
containers. Use at your own risk.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderfooter"></a>renderFooter <span class="propType">function</span> <a class="hash-link" href="#renderfooter">#</a></h4><div><p>() => renderable</p><p>The header and footer are always rendered (if these props are provided)
|
||||
on every render pass. If they are expensive to re-render, wrap them
|
||||
in StaticContainer or other mechanism as appropriate. Footer is always
|
||||
at the bottom of the list, and header at the top, on every render pass.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderheader"></a>renderHeader <span class="propType">function</span> <a class="hash-link" href="#renderheader">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderrow"></a>renderRow <span class="propType">function</span> <a class="hash-link" href="#renderrow">#</a></h4><div><p>(rowData, sectionID, rowID) => renderable
|
||||
Takes a data entry from the data source and its ids and should return
|
||||
a renderable component to be rendered as the row. By default the data
|
||||
is exactly what was put into the data source, but it's also possible to
|
||||
provide custom extractors.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendersectionheader"></a>renderSectionHeader <span class="propType">function</span> <a class="hash-link" href="#rendersectionheader">#</a></h4><div><p>(sectionData, sectionID) => renderable</p><p>If provided, a sticky header is rendered for this section. The sticky
|
||||
behavior means that it will scroll with the content at the top of the
|
||||
section until it reaches the top of the screen, at which point it will
|
||||
stick to the top until it is pushed off the screen by the next section
|
||||
header.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollrenderaheaddistance"></a>scrollRenderAheadDistance <span class="propType">number</span> <a class="hash-link" href="#scrollrenderaheaddistance">#</a></h4><div><p>How early to start rendering rows before they come on screen, in
|
||||
pixels.</p></div></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="mapview.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-28
@@ -1,28 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
See <code>EdgeInsetsPropType.js</code> for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxdelta"></a>maxDelta <span class="propType">number</span> <a class="hash-link" href="#maxdelta">#</a></h4><div><p>Maximum size of area that can be displayed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mindelta"></a>minDelta <span class="propType">number</span> <a class="hash-link" href="#mindelta">#</a></h4><div><p>Minimum size of area that can be displayed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onregionchange"></a>onRegionChange <span class="propType">function</span> <a class="hash-link" href="#onregionchange">#</a></h4><div><p>Callback that is called continuously when the user is dragging the map.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onregionchangecomplete"></a>onRegionChangeComplete <span class="propType">function</span> <a class="hash-link" href="#onregionchangecomplete">#</a></h4><div><p>Callback that is called once, when the user is done moving the map.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pitchenabled"></a>pitchEnabled <span class="propType">bool</span> <a class="hash-link" href="#pitchenabled">#</a></h4><div><p>When this property is set to <code>true</code> and a valid camera is associated
|
||||
with the map, the camera’s pitch angle is used to tilt the plane
|
||||
of the map. When this property is set to <code>false</code>, the camera’s pitch
|
||||
angle is ignored and the map is always displayed as if the user
|
||||
is looking straight down onto it.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="region"></a>region <span class="propType">{latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number}</span> <a class="hash-link" href="#region">#</a></h4><div><p>The region to be displayed by the map.</p><p>The region is defined by the center coordinates and the span of
|
||||
coordinates to display.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rotateenabled"></a>rotateEnabled <span class="propType">bool</span> <a class="hash-link" href="#rotateenabled">#</a></h4><div><p>When this property is set to <code>true</code> and a valid camera is associated with
|
||||
the map, the camera’s heading angle is used to rotate the plane of the
|
||||
map around its center point. When this property is set to <code>false</code>, the
|
||||
camera’s heading angle is ignored and the map is always oriented so
|
||||
that true north is situated at the top of the map view</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled <span class="propType">bool</span> <a class="hash-link" href="#scrollenabled">#</a></h4><div><p>If <code>false</code> the user won't be able to change the map region being displayed.
|
||||
Default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showsuserlocation"></a>showsUserLocation <span class="propType">bool</span> <a class="hash-link" href="#showsuserlocation">#</a></h4><div><p>If <code>true</code> the app will ask for the user's location and focus on it.
|
||||
Default value is <code>false</code>.</p><p><strong>NOTE</strong>: You need to add NSLocationWhenInUseUsageDescription key in
|
||||
Info.plist to enable geolocation, otherwise it is going
|
||||
to <em>fail silently</em>!</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType"><a href="view.html#style">View#style</a></span> <a class="hash-link" href="#style">#</a></h4><div><p>Used to style and layout the <code>MapView</code>. See <code>StyleSheet.js</code> and
|
||||
<code>ViewStylePropTypes.js</code> for more info.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomenabled"></a>zoomEnabled <span class="propType">bool</span> <a class="hash-link" href="#zoomenabled">#</a></h4><div><p>If <code>false</code> the user won't be able to pinch/zoom the map.
|
||||
Default <code>value</code> is true.</p></div></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="navigator.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-73
@@ -1,73 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
</span>#import <span class="token string">"RCTBridgeModule.h"</span>
|
||||
|
||||
@interface <span class="token class-name">CalendarManager</span> <span class="token punctuation">:</span> NSObject <RCTBridgeModule<span class="token operator">></span>
|
||||
@end</div><p>React Native will not expose any methods of <code>CalendarManager</code> to JavaScript unless explicitly asked. Fortunately this is pretty easy with <code>RCT_EXPORT</code>:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// CalendarManager.m
|
||||
</span>@implementation CalendarManager
|
||||
|
||||
<span class="token operator">-</span> <span class="token punctuation">(</span>void<span class="token punctuation">)</span>addEventWithName<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>name location<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>location
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token function">RCT_EXPORT<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token function">RCTLogInfo<span class="token punctuation">(</span></span>@<span class="token string">"Pretending to create an event %@ at %@"</span><span class="token punctuation">,</span> name<span class="token punctuation">,</span> location<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@end</div><p>Now from your JavaScript file you can call the method like this:</p><div class="prism language-javascript"><span class="token keyword">var</span> CalendarManager <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'NativeModules'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>CalendarManager<span class="token punctuation">;</span>
|
||||
CalendarManager<span class="token punctuation">.</span><span class="token function">addEventWithName<span class="token punctuation">(</span></span><span class="token string">'Birthday Party'</span><span class="token punctuation">,</span> <span class="token string">'4 Privet Drive, Surrey'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Notice that the exported method name was generated from first part of Objective-C selector. Sometimes it results in a non-idiomatic JavaScript name (like the one in our example). You can change the name by supplying an optional argument to <code>RCT_EXPORT</code>, e.g. <code>RCT_EXPORT(addEvent)</code>.</p><p>The return type of the method should always be <code>void</code>. React Native bridge is asynchronous, so the only way to pass result to JavaScript is by using callbacks or emitting events (see below).</p><h2><a class="anchor" name="argument-types"></a>Argument types <a class="hash-link" href="#argument-types">#</a></h2><p>React Native supports several types of arguments that can be passed from JavaScript code to native module:</p><ul><li>string (<code>NSString</code>)</li><li>number (<code>NSInteger</code>, <code>float</code>, <code>double</code>, <code>CGFloat</code>, <code>NSNumber</code>)</li><li>boolean (<code>BOOL</code>, <code>NSNumber</code>)</li><li>array (<code>NSArray</code>) of any types from this list</li><li>map (<code>NSDictionary</code>) with string keys and values of any type from this list</li><li>function (<code>RCTResponseSenderBlock</code>)</li></ul><p>In our <code>CalendarManager</code> example, if we want to pass event date to native, we have to convert it to a string or a number:</p><div class="prism language-javascript"><span class="token operator">-</span> <span class="token punctuation">(</span>void<span class="token punctuation">)</span>addEventWithName<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>name location<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>location date<span class="token punctuation">:</span><span class="token punctuation">(</span>NSInteger<span class="token punctuation">)</span>secondsSinceUnixEpoch
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token function">RCT_EXPORT<span class="token punctuation">(</span></span>addEvent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NSDate <span class="token operator">*</span>date <span class="token operator">=</span> <span class="token punctuation">[</span>NSDate dateWithTimeIntervalSince1970<span class="token punctuation">:</span>secondsSinceUnixEpoch<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>As <code>CalendarManager.addEvent</code> method gets more and more complex, the number of arguments will grow. Some of them might be optional. In this case it's worth considering changing the API a little bit to accept a dictionary of event attributes, like this:</p><div class="prism language-javascript"><span class="token operator">-</span> <span class="token punctuation">(</span>void<span class="token punctuation">)</span>addEventWithName<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>name details<span class="token punctuation">:</span><span class="token punctuation">(</span>NSDictionary <span class="token operator">*</span><span class="token punctuation">)</span>details
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token function">RCT_EXPORT<span class="token punctuation">(</span></span>addEvent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NSString <span class="token operator">*</span>location <span class="token operator">=</span> <span class="token punctuation">[</span>RCTConvert NSString<span class="token punctuation">:</span>details<span class="token punctuation">[</span>@<span class="token string">"location"</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true"> // ensure location is a string
|
||||
</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||||
<span class="token punctuation">}</span></div><p>and call it from JavaScript:</p><div class="prism language-javascript">CalendarManager<span class="token punctuation">.</span><span class="token function">addEvent<span class="token punctuation">(</span></span><span class="token string">'Birthday Party'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
location<span class="token punctuation">:</span> <span class="token string">'4 Privet Drive, Surrey'</span><span class="token punctuation">,</span>
|
||||
time<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">toTime<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'...'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span></div><blockquote><p><strong>NOTE</strong>: About array and map</p><p>React Native doesn't provide any guarantees about the types of values in these structures. Your native module might expect array of strings, but if JavaScript calls your method with an array that contains number and string you'll get <code>NSArray</code> with <code>NSNumber</code> and <code>NSString</code>. It's developer's responsibility to check array/map values types (see <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTConvert.h" target="_blank"><code>RCTConvert</code></a> for helper methods).</p></blockquote><h1><a class="anchor" name="callbacks"></a>Callbacks <a class="hash-link" href="#callbacks">#</a></h1><blockquote><p><strong>WARNING</strong></p><p>This section is even more experimental than others, we don't have a set of best practices around callbacks yet.</p></blockquote><p>Native module also supports a special kind of argument - callback. In most cases it is used to provide function call result to JavaScript.</p><div class="prism language-javascript"><span class="token operator">-</span> <span class="token punctuation">(</span>void<span class="token punctuation">)</span>findEvents<span class="token punctuation">:</span><span class="token punctuation">(</span>RCTResponseSenderBlock<span class="token punctuation">)</span>callback
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token function">RCT_EXPORT<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NSArray <span class="token operator">*</span>events <span class="token operator">=</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||||
<span class="token function">callback<span class="token punctuation">(</span></span>@<span class="token punctuation">[</span><span class="token punctuation">[</span>NSNull <span class="token keyword">null</span><span class="token punctuation">]</span><span class="token punctuation">,</span> events<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p><code>RCTResponseSenderBlock</code> accepts only one argument - array of arguments to pass to JavaScript callback. In this case we use node's convention to set first argument to error and the rest - to the result of the function.</p><div class="prism language-javascript">CalendarManager<span class="token punctuation">.</span><span class="token function">findEvents<span class="token punctuation">(</span></span><span class="token punctuation">(</span>error<span class="token punctuation">,</span> events<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">error<span class="token punctuation">(</span></span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>events<span class="token punctuation">:</span> events<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></div><p>Native module is supposed to invoke callback only once. It can, however, store the callback as an ivar and invoke it later. This pattern is often used to wrap iOS APIs that require delegate. See <a href="https://github.com/facebook/react-native/blob/master/React/Modules/RCTAlertManager.m" target="_blank"><code>RCTAlertManager</code></a>.</p><p>If you want to pass error-like object to JavaScript, use <code>RCTMakeError</code> from <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTUtils.h" target="_blank"><code>RCTUtils.h</code></a>.</p><h2><a class="anchor" name="implementing-native-module"></a>Implementing native module <a class="hash-link" href="#implementing-native-module">#</a></h2><p>The native module should not have any assumptions about what thread it is being called on. React Native invokes native modules methods on a separate serial GCD queue, but this is an implementation detail and might change. If the native module needs to call main-thread-only iOS API, it should schedule the operation on the main queue:</p><div class="prism language-javascript"><span class="token operator">-</span> <span class="token punctuation">(</span>void<span class="token punctuation">)</span>addEventWithName<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>name callback<span class="token punctuation">:</span><span class="token punctuation">(</span>RCTResponseSenderBlock<span class="token punctuation">)</span>callback
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token function">RCT_EXPORT<span class="token punctuation">(</span></span>addEvent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token function">dispatch_async<span class="token punctuation">(</span></span><span class="token function">dispatch_get_main_queue<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token operator">^</span><span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // Call iOS API on main thread
|
||||
</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||||
<span class="token comment" spellcheck="true"> // You can invoke callback from any thread/queue
|
||||
</span> <span class="token function">callback<span class="token punctuation">(</span></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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>The same way if the operation can take a long time to complete, the native module should not block. It is a good idea to use <code>dispatch_async</code> to schedule expensive work on background queue.</p><h2><a class="anchor" name="exporting-constants"></a>Exporting constants <a class="hash-link" href="#exporting-constants">#</a></h2><p>Native module can export constants that are instantly available to JavaScript at runtime. This is useful to export some initial data that would otherwise require a bridge round-trip.</p><div class="prism language-javascript"><span class="token operator">-</span> <span class="token punctuation">(</span>NSDictionary <span class="token operator">*</span><span class="token punctuation">)</span>constantsToExport
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> @<span class="token punctuation">{</span> @<span class="token string">"firstDayOfTheWeek"</span><span class="token punctuation">:</span> @<span class="token string">"Monday"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>JavaScript can use this value right away:</p><div class="prism language-javascript">console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>CalendarManager<span class="token punctuation">.</span>firstDayOfTheWeek<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Note that the constants are exported only at initialization time, so if you change <code>constantsToExport</code> value at runtime it won't affect JavaScript environment.</p><h2><a class="anchor" name="sending-events-to-javascript"></a>Sending events to JavaScript <a class="hash-link" href="#sending-events-to-javascript">#</a></h2><p>The native module can signal events to JavaScript without being invoked directly. The easiest way to do this is to use <code>eventDispatcher</code>:</p><div class="prism language-javascript"><span class="token operator">-</span> <span class="token punctuation">(</span>void<span class="token punctuation">)</span>calendarEventReminderReceived<span class="token punctuation">:</span><span class="token punctuation">(</span>NSNotification <span class="token operator">*</span><span class="token punctuation">)</span>notification
|
||||
<span class="token punctuation">{</span>
|
||||
NSString <span class="token operator">*</span>eventName <span class="token operator">=</span> notification<span class="token punctuation">.</span>userInfo<span class="token punctuation">[</span>@<span class="token string">"name"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">[</span>self<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span>eventDispatcher sendAppEventWithName<span class="token punctuation">:</span>@<span class="token string">"EventReminder"</span>
|
||||
body<span class="token punctuation">:</span>@<span class="token punctuation">{</span>@<span class="token string">"name"</span><span class="token punctuation">:</span> eventName<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>JavaScript code can subscribe to these events:</p><div class="prism language-javascript"><span class="token keyword">var</span> subscription <span class="token operator">=</span> DeviceEventEmitter<span class="token punctuation">.</span><span class="token function">addListener<span class="token punctuation">(</span></span>
|
||||
<span class="token string">'EventReminder'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span>reminder<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>reminder<span class="token punctuation">.</span>name<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">
|
||||
// Don't forget to unsubscribe
|
||||
</span>subscription<span class="token punctuation">.</span><span class="token function">remove<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>For more examples of sending events to JavaScript, see <a href="https://github.com/facebook/react-native/blob/master/Libraries/Geolocation/RCTLocationObserver.m" target="_blank"><code>RCTLocationObserver</code></a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="libraries.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-62
@@ -1,62 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
accomplish this, provide route objects to the navigator to identify each
|
||||
scene, and also a <code>renderScene</code> function that the navigator can use to
|
||||
render the scene for a given route.</p><p>To change the animation or gesture properties of the scene, provide a
|
||||
<code>configureScene</code> prop to get the config object for a given route. See
|
||||
<code>Navigator.SceneConfigs</code> for default animations and more info on
|
||||
scene config options.</p><h3><a class="anchor" name="basic-usage"></a>Basic Usage <a class="hash-link" href="#basic-usage">#</a></h3><div class="prism language-javascript"> <Navigator
|
||||
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'My First Scene'</span><span class="token punctuation">,</span> index<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
renderScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span>
|
||||
<MySceneComponent
|
||||
name<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>name<span class="token punctuation">}</span>
|
||||
onForward<span class="token operator">=</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> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> nextIndex <span class="token operator">=</span> route<span class="token punctuation">.</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||||
navigator<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
name<span class="token punctuation">:</span> <span class="token string">'Scene '</span> <span class="token operator">+</span> nextIndex<span class="token punctuation">,</span>
|
||||
index<span class="token punctuation">:</span> nextIndex<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>
|
||||
onBack<span class="token operator">=</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> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>index <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
navigator<span class="token punctuation">.</span><span class="token function">pop<span class="token punctuation">(</span></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 operator">/</span><span class="token operator">></span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span></div><h3><a class="anchor" name="navigation-methods"></a>Navigation Methods <a class="hash-link" href="#navigation-methods">#</a></h3><p><code>Navigator</code> can be told to navigate in two ways. If you have a ref to
|
||||
the element, you can invoke several methods on it to trigger navigation:</p><ul><li><code>jumpBack()</code> - Jump backward without unmounting the current scene</li><li><code>jumpForward()</code> - Jump forward to the next scene in the route stack</li><li><code>jumpTo(route)</code> - Transition to an existing scene without unmounting</li><li><code>push(route)</code> - Navigate forward to a new scene, squashing any scenes
|
||||
that you could <code>jumpForward</code> to</li><li><code>pop()</code> - Transition back and unmount the current scene</li><li><code>replace(route)</code> - Replace the current scene with a new route</li><li><code>replaceAtIndex(route, index)</code> - Replace a scene as specified by an index</li><li><code>replacePrevious(route)</code> - Replace the previous scene</li><li><code>immediatelyResetRouteStack(routeStack)</code> - Reset every scene with an
|
||||
array of routes</li><li><code>popToRoute(route)</code> - Pop to a particular scene, as specified by it's
|
||||
route. All scenes after it will be unmounted</li><li><code>popToTop()</code> - Pop to the first scene in the stack, unmounting every
|
||||
other scene</li></ul><h3><a class="anchor" name="navigator-object"></a>Navigator Object <a class="hash-link" href="#navigator-object">#</a></h3><p>The navigator object is made available to scenes through the <code>renderScene</code>
|
||||
function. The object has all of the navigation methods on it, as well as a
|
||||
few utilities:</p><ul><li><code>parentNavigator</code> - a refrence to the parent navigator object that was
|
||||
passed in through props.navigator</li><li><code>onWillFocus</code> - used to pass a navigation focus event up to the parent
|
||||
navigator</li><li><code>onDidFocus</code> - used to pass a navigation focus event up to the parent
|
||||
navigator</li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="configurescene"></a>configureScene <span class="propType">function</span> <a class="hash-link" href="#configurescene">#</a></h4><div><p>Optional function that allows configuration about scene animations and
|
||||
gestures. Will be invoked with the route and should return a scene
|
||||
configuration object</p><div class="prism language-javascript"><span class="token punctuation">(</span>route<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> Navigator<span class="token punctuation">.</span>SceneConfigs<span class="token punctuation">.</span>FloatFromRight</div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroute"></a>initialRoute <span class="propType">object</span> <a class="hash-link" href="#initialroute">#</a></h4><div><p>Provide a single "route" to start on. A route is an arbitrary object
|
||||
that the navigator will use to identify each scene before rendering.
|
||||
Either initialRoute or initialRouteStack is required.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroutestack"></a>initialRouteStack <span class="propType">[object]</span> <a class="hash-link" href="#initialroutestack">#</a></h4><div><p>Provide a set of routes to initially mount the scenes for. Required if no
|
||||
initialRoute is provided</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigationbar"></a>navigationBar <span class="propType">node</span> <a class="hash-link" href="#navigationbar">#</a></h4><div><p>Optionally provide a navigation bar that persists across scene
|
||||
transitions</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigator"></a>navigator <span class="propType">object</span> <a class="hash-link" href="#navigator">#</a></h4><div><p>Optionally provide the navigator object from a parent Navigator</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondidfocus"></a>onDidFocus <span class="propType">function</span> <a class="hash-link" href="#ondidfocus">#</a></h4><div><p>Will be called with the new route of each scene after the transition is
|
||||
complete or after the initial mounting. This overrides the onDidFocus
|
||||
handler that would be found in this.props.navigator</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onitemref"></a>onItemRef <span class="propType">function</span> <a class="hash-link" href="#onitemref">#</a></h4><div><p>Will be called with (ref, indexInStack) when the scene ref changes</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onwillfocus"></a>onWillFocus <span class="propType">function</span> <a class="hash-link" href="#onwillfocus">#</a></h4><div><p>Will emit the target route upon mounting and before each nav transition,
|
||||
overriding the handler in this.props.navigator. This overrides the onDidFocus
|
||||
handler that would be found in this.props.navigator</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscene"></a>renderScene <span class="propType">function</span> <a class="hash-link" href="#renderscene">#</a></h4><div><p>Required function which renders the scene for a given route. Will be
|
||||
invoked with the route, the navigator object, and a ref handler that
|
||||
will allow a ref to your scene to be provided by props.onItemRef</p><div class="prism language-javascript"><span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">,</span> onRef<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span>
|
||||
<MySceneComponent title<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span> ref<span class="token operator">=</span><span class="token punctuation">{</span>onRef<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scenestyle"></a>sceneStyle <span class="propType"><a href="view.html#style">View#style</a></span> <a class="hash-link" href="#scenestyle">#</a></h4><div><p>Styles to apply to the container of each scene</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shouldjumponbackstackpop"></a>shouldJumpOnBackstackPop <span class="propType">bool</span> <a class="hash-link" href="#shouldjumponbackstackpop">#</a></h4><div><p>Should the backstack back button "jump" back instead of pop? Set to true
|
||||
if a jump forward might happen after the android back button is pressed,
|
||||
so the scenes will remain mounted</p></div></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="navigatorios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-50
@@ -1,50 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
functionality across your app.</p><h4><a class="anchor" name="routes"></a>Routes <a class="hash-link" href="#routes">#</a></h4><p>A route is an object used to describe each page in the navigator. The first
|
||||
route is provided to NavigatorIOS as <code>initialRoute</code>:</p><div class="prism language-javascript">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 keyword">return</span> <span class="token punctuation">(</span>
|
||||
<NavigatorIOS
|
||||
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
component<span class="token punctuation">:</span> MyView<span class="token punctuation">,</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'My View Title'</span><span class="token punctuation">,</span>
|
||||
passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> myProp<span class="token punctuation">:</span> <span class="token string">'foo'</span> <span class="token punctuation">}</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>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>Now MyView will be rendered by the navigator. It will recieve the route
|
||||
object in the <code>route</code> prop, a navigator, and all of the props specified in
|
||||
<code>passProps</code>.</p><p>See the initialRoute propType for a complete definition of a route.</p><h4><a class="anchor" name="navigator"></a>Navigator <a class="hash-link" href="#navigator">#</a></h4><p>A <code>navigator</code> is an object of navigation functions that a view can call. It
|
||||
is passed as a prop to any component rendered by NavigatorIOS.</p><div class="prism language-javascript"><span class="token keyword">var</span> MyView <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>
|
||||
_handleBackButtonPress<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">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">pop<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
_handleNextButtonPress<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">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span>nextRoute<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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>A navigation object contains the following functions:</p><ul><li><code>push(route)</code> - Navigate forward to a new route</li><li><code>pop()</code> - Go back one page</li><li><code>popN(n)</code> - Go back N pages at once. When N=1, behavior matches <code>pop()</code></li><li><code>replace(route)</code> - Replace the route for the current page and immediately
|
||||
load the view for the new route</li><li><code>replacePrevious(route)</code> - Replace the route/view for the previous page</li><li><code>replacePreviousAndPop(route)</code> - Replaces the previous route/view and
|
||||
transitions back to it</li><li><code>resetTo(route)</code> - Replaces the top item and popToTop</li><li><code>popToRoute(route)</code> - Go back to the item for a particular route object</li><li><code>popToTop()</code> - Go back to the top item</li></ul><p>Navigator functions are also available on the NavigatorIOS component:</p><div class="prism language-javascript"><span class="token keyword">var</span> MyView <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>
|
||||
_handleNavigationRequest<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">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">.</span>nav<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span>otherRoute<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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
|
||||
<NavigatorIOS
|
||||
ref<span class="token operator">=</span><span class="token string">"nav"</span>
|
||||
initialRoute<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 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 punctuation">;</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroute"></a>initialRoute <span class="propType">{component: function, title: string, passProps: object, backButtonTitle: string, rightButtonTitle: string, onRightButtonPress: function, wrapperStyle: [object Object]}</span> <a class="hash-link" href="#initialroute">#</a></h4><div><p>NavigatorIOS uses "route" objects to identify child views, their props,
|
||||
and navigation bar configuration. "push" and all the other navigation
|
||||
operations expect routes to be like this:</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemwrapperstyle"></a>itemWrapperStyle <span class="propType"><a href="view.html#style">View#style</a></span> <a class="hash-link" href="#itemwrapperstyle">#</a></h4><div><p>The default wrapper style for components in the navigator.
|
||||
A common use case is to set the backgroundColor for every page</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor <span class="propType">string</span> <a class="hash-link" href="#tintcolor">#</a></h4><div><p>The color used for buttons in the navigation bar</p></div></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="pickerios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-39
@@ -1,39 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Initial: '</span> <span class="token operator">+</span> reach<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 keyword">function</span> <span class="token function">handleFirstReachabilityChange<span class="token punctuation">(</span></span>reach<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'First change: '</span> <span class="token operator">+</span> reach<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span>reachabilityIOS<span class="token punctuation">.</span><span class="token function">removeEventListener<span class="token punctuation">(</span></span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
handleFirstReachabilityChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span>reachabilityIOS<span class="token punctuation">.</span><span class="token function">addEventListener<span class="token punctuation">(</span></span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
handleFirstReachabilityChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h3><a class="anchor" name="isconnected"></a>isConnected <a class="hash-link" href="#isconnected">#</a></h3><p>Available on all platforms. Asyncronously fetch a boolean to determine
|
||||
internet connectivity.</p><div class="prism language-javascript">NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">fetch<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done<span class="token punctuation">(</span></span><span class="token punctuation">(</span>isConnected<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'First, is '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>isConnected <span class="token operator">?</span> <span class="token string">'online'</span> <span class="token punctuation">:</span> <span class="token string">'offline'</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 keyword">function</span> <span class="token function">handleFirstConnectivityChange<span class="token punctuation">(</span></span>isConnected<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Then, is '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>isConnected <span class="token operator">?</span> <span class="token string">'online'</span> <span class="token punctuation">:</span> <span class="token string">'offline'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">removeEventListener<span class="token punctuation">(</span></span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">addEventListener<span class="token punctuation">(</span></span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="panresponder.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-33
@@ -1,33 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
request<span class="token punctuation">.</span>onreadystatechange <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>request<span class="token punctuation">.</span>readyState <span class="token operator">!</span><span class="token operator">==</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>request<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'success'</span><span class="token punctuation">,</span> request<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">warn<span class="token punctuation">(</span></span><span class="token string">'error'</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>
|
||||
|
||||
request<span class="token punctuation">.</span><span class="token function">open<span class="token punctuation">(</span></span><span class="token string">'GET'</span><span class="token punctuation">,</span> <span class="token string">'https://mywebsite.com/endpoint.php'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
request<span class="token punctuation">.</span><span class="token function">send<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Please follow the <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" target="_blank">MDN Documentation</a> for a complete description of the API.</p><p>As a developer, you're probably not going to use XMLHttpRequest directly as its API is very tedious to work with. But the fact that it is implemented and compatible with the browser API gives you the ability to use third-party libraries such as <a href="https://parse.com/products/javascript" target="_blank">Parse</a> or <a href="https://github.com/visionmedia/superagent" target="_blank">super-agent</a> directly from npm.</p><h2><a class="anchor" name="fetch"></a>Fetch <a class="hash-link" href="#fetch">#</a></h2><p><a href="https://fetch.spec.whatwg.org/" target="_blank">fetch</a> is a better networking API being worked on by the standard committee and is already available in Chrome. It is available in React Native by default.</p><div class="prism language-javascript"><span class="token function">fetch<span class="token punctuation">(</span></span><span class="token string">'https://mywebsite.com/endpoint.php'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> response<span class="token punctuation">.</span><span class="token function">text<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>responseText<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>responseText<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 keyword">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">warn<span class="token punctuation">(</span></span>error<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></div></div><div class="docs-prevnext"><a class="docs-next" href="timers.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-66
@@ -1,66 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
single-touch gestures resilient to extra touches, and can be used to
|
||||
recognize simple multi-touch gestures.</p><p>It provides a predictable wrapper of the responder handlers provided by the
|
||||
<a href="/react-native/docs/gesture-responder-system.html" target="">gesture responder system</a>.
|
||||
For each handler, it provides a new <code>gestureState</code> object alongside the
|
||||
normal event.</p><p>A <code>gestureState</code> object has the following:</p><ul><li><code>stateID</code> - ID of the gestureState- persisted as long as there at least
|
||||
one touch on screen</li><li><code>moveX</code> - the latest screen coordinates of the recently-moved touch</li><li><code>moveY</code> - the latest screen coordinates of the recently-moved touch</li><li><code>x0</code> - the screen coordinates of the responder grant</li><li><code>y0</code> - the screen coordinates of the responder grant</li><li><code>dx</code> - accumulated distance of the gesture since the touch started</li><li><code>dy</code> - accumulated distance of the gesture since the touch started</li><li><code>vx</code> - current velocity of the gesture</li><li><code>vy</code> - current velocity of the gesture</li><li><code>numberActiveTouches</code> - Number of touches currently on screeen</li></ul><h3><a class="anchor" name="basic-usage"></a>Basic Usage <a class="hash-link" href="#basic-usage">#</a></h3><div class="prism language-javascript"> componentWillMount<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">this</span><span class="token punctuation">.</span>_panGesture <span class="token operator">=</span> PanResponder<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // Ask to be the responder:
|
||||
</span> onStartShouldSetPanResponder<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
onStartShouldSetPanResponderCapture<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
onMoveShouldSetPanResponder<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
onMoveShouldSetPanResponderCapture<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
|
||||
onPanResponderGrant<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // The guesture has started. Show visual feedback so the user knows
|
||||
</span> <span class="token comment" spellcheck="true"> // what is happening!
|
||||
</span>
|
||||
<span class="token comment" spellcheck="true"> // gestureState.{x,y}0 will be set to zero now
|
||||
</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
onPanResponderMove<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // The most recent move distance is gestureState.move{X,Y}
|
||||
</span>
|
||||
<span class="token comment" spellcheck="true"> // The accumulated gesture distance since becoming responder is
|
||||
</span> <span class="token comment" spellcheck="true"> // gestureState.d{x,y}
|
||||
</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
onResponderTerminationRequest<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
onPanResponderRelease<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // The user has released all touches while this view is the
|
||||
</span> <span class="token comment" spellcheck="true"> // responder. This typically means a gesture has succeeded
|
||||
</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
onPanResponderTerminate<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // Another component has become the responder, so this gesture
|
||||
</span> <span class="token comment" spellcheck="true"> // should be cancelled
|
||||
</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>
|
||||
|
||||
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 keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View <span class="token punctuation">{</span><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>_panResponder<span class="token punctuation">.</span>panHandlers<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></div><h3><a class="anchor" name="working-example"></a>Working Example <a class="hash-link" href="#working-example">#</a></h3><p>To see it in action, try the
|
||||
<a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ResponderExample.js" target="_blank">PanResponder example in UIExplorer</a></p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="create"></a><span class="propType">static </span>create<span class="propType">(config: object)</span> <a class="hash-link" href="#create">#</a></h4><div><p>@param {object} config Enhanced versions of all of the responder callbacks
|
||||
that provide not only the typical <code>ResponderSyntheticEvent</code>, but also the
|
||||
<code>PanResponder</code> gesture state. Simply replace the word <code>Responder</code> with
|
||||
<code>PanResponder</code> in each of the typical <code>onResponder*</code> callbacks. For
|
||||
example, the <code>config</code> object would look like:</p><ul><li><code>onMoveShouldSetPanResponder: (e, gestureState) => {...}</code></li><li><code>onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}</code></li><li><code>onStartShouldSetPanResponder: (e, gestureState) => {...}</code></li><li><code>onStartShouldSetPanResponderCapture: (e, gestureState) => {...}</code></li><li><code>onPanResponderReject: (e, gestureState) => {...}</code></li><li><code>onPanResponderGrant: (e, gestureState) => {...}</code></li><li><code>onPanResponderStart: (e, gestureState) => {...}</code></li><li><code>onPanResponderEnd: (e, gestureState) => {...}</code></li><li><code>onPanResponderRelease: (e, gestureState) => {...}</code></li><li><code>onPanResponderMove: (e, gestureState) => {...}</code></li><li><code>onPanResponderTerminate: (e, gestureState) => {...}</code></li><li><p><code>onPanResponderTerminationRequest: (e, gestureState) => {...}</code></p><p>In general, for events that have capture equivalents, we update the
|
||||
gestureState once in the capture phase and can use it in the bubble phase
|
||||
as well.</p><p>Be careful with onStartShould* callbacks. They only reflect updated
|
||||
<code>gestureState</code> for start/end events that bubble/capture to the Node.
|
||||
Once the node is the responder, you can rely on every start/end event
|
||||
being processed by the gesture and <code>gestureState</code> being updated
|
||||
accordingly. (numberActiveTouches) may not be totally accurate unless you
|
||||
are the responder.</p></li></ul></div></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="pixelratio.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-12
@@ -1,12 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
(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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-20
@@ -1,20 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
thinner using a width of <code>1 / PixelRatio.get()</code>. It's a technique that works
|
||||
on all the devices independent of their pixel density.</p><div class="prism language-javascript">style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> borderWidth<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token operator">/</span> PixelRatio<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></div><h3><a class="anchor" name="fetching-a-correctly-sized-image"></a>Fetching a correctly sized image <a class="hash-link" href="#fetching-a-correctly-sized-image">#</a></h3><p>You should get a higher resolution image if you are on a high pixel density
|
||||
device. A good rule of thumb is to multiply the size of the image you display
|
||||
by the pixel ratio.</p><div class="prism language-javascript"><span class="token keyword">var</span> image <span class="token operator">=</span> <span class="token function">getImage<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
width<span class="token punctuation">:</span> <span class="token number">200</span> <span class="token operator">*</span> PixelRatio<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
height<span class="token punctuation">:</span> <span class="token number">100</span> <span class="token operator">*</span> PixelRatio<span class="token punctuation">.</span><span class="token keyword">get</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>
|
||||
<Image source<span class="token operator">=</span><span class="token punctuation">{</span>image<span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="get"></a><span class="propType">static </span>get<span class="propType">()</span> <a class="hash-link" href="#get">#</a></h4><div><p>Returns the device pixel density. Some examples:</p><ul><li>PixelRatio.get() === 2<ul><li>iPhone 4, 4S</li><li>iPhone 5, 5c, 5s</li><li>iPhone 6</li></ul></li><li>PixelRatio.get() === 3<ul><li>iPhone 6 plus</li></ul></li></ul></div></div></div></span></div><div><h2><a class="anchor" name="pixel-grid-snapping"></a>Pixel Grid Snapping <a class="hash-link" href="#pixel-grid-snapping">#</a></h2><p>In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.</p><p>In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.</p><p>We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.</p><p>In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.</p></div><div class="docs-prevnext"><a class="docs-next" href="pushnotificationios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
@@ -1,22 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
icon badge number.</p><p>To get up and running, <a href="https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/ConfiguringPushNotifications/ConfiguringPushNotifications.html" target="_blank">configure your notifications with Apple</a>
|
||||
and your server-side system. To get an idea, <a href="https://parse.com/tutorials/ios-push-notifications" target="_blank">this is the Parse guide</a>.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="setapplicationiconbadgenumber"></a><span class="propType">static </span>setApplicationIconBadgeNumber<span class="propType">(number: number)</span> <a class="hash-link" href="#setapplicationiconbadgenumber">#</a></h4><div><p>Sets the badge number for the app icon on the home screen</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getapplicationiconbadgenumber"></a><span class="propType">static </span>getApplicationIconBadgeNumber<span class="propType">(callback: Function)</span> <a class="hash-link" href="#getapplicationiconbadgenumber">#</a></h4><div><p>Gets the current badge number for the app icon on the home screen</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="addeventlistener"></a><span class="propType">static </span>addEventListener<span class="propType">(type: string, handler: Function)</span> <a class="hash-link" href="#addeventlistener">#</a></h4><div><p>Attaches a listener to remote notifications while the app is running in the
|
||||
foreground or the background.</p><p>The handler will get be invoked with an instance of <code>PushNotificationIOS</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="requestpermissions"></a><span class="propType">static </span>requestPermissions<span class="propType">()</span> <a class="hash-link" href="#requestpermissions">#</a></h4><div><p>Requests all notification permissions from iOS, prompting the user's
|
||||
dialog box.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="checkpermissions"></a><span class="propType">static </span>checkPermissions<span class="propType">(callback: Function)</span> <a class="hash-link" href="#checkpermissions">#</a></h4><div><p>See what push permissions are currently enabled. <code>callback</code> will be
|
||||
invoked with a <code>permissions</code> object:</p><ul><li><code>alert</code> :boolean</li><li><code>badge</code> :boolean</li><li><code>sound</code> :boolean</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeeventlistener"></a><span class="propType">static </span>removeEventListener<span class="propType">(type: string, handler: Function)</span> <a class="hash-link" href="#removeeventlistener">#</a></h4><div><p>Removes the event listener. Do this in <code>componentWillUnmount</code> to prevent
|
||||
memory leaks</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="popinitialnotification"></a><span class="propType">static </span>popInitialNotification<span class="propType">()</span> <a class="hash-link" href="#popinitialnotification">#</a></h4><div><p>An initial notification will be available if the app was cold-launched
|
||||
from a notification.</p><p>The first caller of <code>popInitialNotification</code> will get the initial
|
||||
notification object, or <code>null</code>. Subsequent invocations will return null.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="constructor"></a>constructor<span class="propType">(nativeNotif)</span> <a class="hash-link" href="#constructor">#</a></h4><div><p>You will never need to instansiate <code>PushNotificationIOS</code> yourself.
|
||||
Listening to the <code>notification</code> event and invoking
|
||||
<code>popInitialNotification</code> is sufficient</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getmessage"></a>getMessage<span class="propType">()</span> <a class="hash-link" href="#getmessage">#</a></h4><div><p>An alias for <code>getAlert</code> to get the notification's main message string</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getsound"></a>getSound<span class="propType">()</span> <a class="hash-link" href="#getsound">#</a></h4><div><p>Gets the sound string from the <code>aps</code> object</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getalert"></a>getAlert<span class="propType">()</span> <a class="hash-link" href="#getalert">#</a></h4><div><p>Gets the notification's main message from the <code>aps</code> object</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getbadgecount"></a>getBadgeCount<span class="propType">()</span> <a class="hash-link" href="#getbadgecount">#</a></h4><div><p>Gets the badge count number from the <code>aps</code> object</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getdata"></a>getData<span class="propType">()</span> <a class="hash-link" href="#getdata">#</a></h4><div><p>Gets the data object on the notif</p></div></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="statusbarios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-53
@@ -1,53 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
integration with touch locking "responder" system.</p><p>Doesn't yet support other contained responders from blocking this scroll
|
||||
view from becoming the responder.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="alwaysbouncehorizontal"></a>alwaysBounceHorizontal <span class="propType">bool</span> <a class="hash-link" href="#alwaysbouncehorizontal">#</a></h4><div><p>When true, the scroll view bounces horizontally when it reaches the end
|
||||
even if the content is smaller than the scroll view itself. The default
|
||||
value is true when <code>horizontal={true}</code> and false otherwise.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alwaysbouncevertical"></a>alwaysBounceVertical <span class="propType">bool</span> <a class="hash-link" href="#alwaysbouncevertical">#</a></h4><div><p>When true, the scroll view bounces vertically when it reaches the end
|
||||
even if the content is smaller than the scroll view itself. The default
|
||||
value is false when <code>horizontal={true}</code> and true otherwise.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="automaticallyadjustcontentinsets"></a>automaticallyAdjustContentInsets <span class="propType">bool</span> <a class="hash-link" href="#automaticallyadjustcontentinsets">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="centercontent"></a>centerContent <span class="propType">bool</span> <a class="hash-link" href="#centercontent">#</a></h4><div><p>When true, the scroll view automatically centers the content when the
|
||||
content is smaller than the scroll view bounds; when the content is
|
||||
larger than the scroll view, this property has no effect. The default
|
||||
value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentcontainerstyle"></a>contentContainerStyle <span class="propType">StyleSheetPropType(ViewStylePropTypes)</span> <a class="hash-link" href="#contentcontainerstyle">#</a></h4><div><p>These styles will be applied to the scroll view content container which
|
||||
wraps all of the child views. Example:</p><p> return (
|
||||
<ScrollView contentContainerStyle={styles.contentContainer}>
|
||||
</ScrollView>
|
||||
);
|
||||
...
|
||||
var styles = StyleSheet.create({
|
||||
contentContainer: {
|
||||
paddingVertical: 20
|
||||
}
|
||||
});</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinset"></a>contentInset <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="#contentinset">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentoffset"></a>contentOffset <span class="propType">PointPropType</span> <a class="hash-link" href="#contentoffset">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="decelerationrate"></a>decelerationRate <span class="propType">number</span> <a class="hash-link" href="#decelerationrate">#</a></h4><div><p>A floating-point number that determines how quickly the scroll view
|
||||
decelerates after the user lifts their finger. Reasonable choices include
|
||||
- Normal: 0.998 (the default)
|
||||
- Fast: 0.9</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="horizontal"></a>horizontal <span class="propType">bool</span> <a class="hash-link" href="#horizontal">#</a></h4><div><p>When true, the scroll view's children are arranged horizontally in a row
|
||||
instead of vertically in a column. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode <span class="propType">enum("none", 'interactive', 'onDrag')</span> <a class="hash-link" href="#keyboarddismissmode">#</a></h4><div><p>Determines whether the keyboard gets dismissed in response to a drag.
|
||||
- 'none' (the default), drags do not dismiss the keyboard.
|
||||
- 'onDrag', the keyboard is dismissed when a drag begins.
|
||||
- 'interactive', the keyboard is dismissed interactively with the drag
|
||||
and moves in synchrony with the touch; dragging upwards cancels the
|
||||
dismissal.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardshouldpersisttaps"></a>keyboardShouldPersistTaps <span class="propType">bool</span> <a class="hash-link" href="#keyboardshouldpersisttaps">#</a></h4><div><p>When false, tapping outside of the focused text input when the keyboard
|
||||
is up dismisses the keyboard. When true, the scroll view will not catch
|
||||
taps, and the keyboard will not dismiss automatically. The default value
|
||||
is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumzoomscale"></a>maximumZoomScale <span class="propType">number</span> <a class="hash-link" href="#maximumzoomscale">#</a></h4><div><p>The maximum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumzoomscale"></a>minimumZoomScale <span class="propType">number</span> <a class="hash-link" href="#minimumzoomscale">#</a></h4><div><p>The minimum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscroll"></a>onScroll <span class="propType">function</span> <a class="hash-link" href="#onscroll">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscrollanimationend"></a>onScrollAnimationEnd <span class="propType">function</span> <a class="hash-link" href="#onscrollanimationend">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pagingenabled"></a>pagingEnabled <span class="propType">bool</span> <a class="hash-link" href="#pagingenabled">#</a></h4><div><p>When true, the scroll view stops on multiples of the scroll view's size
|
||||
when scrolling. This can be used for horizontal pagination. The default
|
||||
value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews <span class="propType">bool</span> <a class="hash-link" href="#removeclippedsubviews">#</a></h4><div><p>Experimental: When true, offscreen child views (whose <code>overflow</code> value is
|
||||
<code>hidden</code>) are removed from their native backing superview when offscreen.
|
||||
This canimprove scrolling performance on long lists. The default value is
|
||||
false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled <span class="propType">bool</span> <a class="hash-link" href="#scrollenabled">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollindicatorinsets"></a>scrollIndicatorInsets <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="#scrollindicatorinsets">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollstotop"></a>scrollsToTop <span class="propType">bool</span> <a class="hash-link" href="#scrollstotop">#</a></h4><div><p>When true, the scroll view scrolls to top when the status bar is tapped.
|
||||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showshorizontalscrollindicator"></a>showsHorizontalScrollIndicator <span class="propType">bool</span> <a class="hash-link" href="#showshorizontalscrollindicator">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showsverticalscrollindicator"></a>showsVerticalScrollIndicator <span class="propType">bool</span> <a class="hash-link" href="#showsverticalscrollindicator">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickyheaderindices"></a>stickyHeaderIndices <span class="propType">[number]</span> <a class="hash-link" href="#stickyheaderindices">#</a></h4><div><p>An array of child indices determining which children get docked to the
|
||||
top of the screen when scrolling. For example, passing
|
||||
<code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the
|
||||
top of the scroll view. This property is not supported in conjunction
|
||||
with <code>horizontal={true}</code>.</p></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="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType">string</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">string</span></h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType">string</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">rotation <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">scaleX <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">scaleY <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">shadowColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">shadowOffset <span class="propType">{h: number, w: number}</span></h6></div><div class="prop"><h6 class="propTitle">shadowOpacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">shadowRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">transformMatrix <span class="propType">[number]</span></h6></div><div class="prop"><h6 class="propTitle">translateX <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">translateY <span class="propType">number</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="throttlescrollcallbackms"></a>throttleScrollCallbackMS <span class="propType">number</span> <a class="hash-link" href="#throttlescrollcallbackms">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a>zoomScale <span class="propType">number</span> <a class="hash-link" href="#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="sliderios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-17
@@ -1,17 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
the slider is released).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange <span class="propType">function</span> <a class="hash-link" href="#onvaluechange">#</a></h4><div><p>Callback continuously called while the user is dragging the slider.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType"><a href="view.html#style">View#style</a></span> <a class="hash-link" href="#style">#</a></h4><div><p>Used to style and layout the <code>Slider</code>. See <code>StyleSheet.js</code> and
|
||||
<code>ViewStylePropTypes.js</code> for more info.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value <span class="propType">number</span> <a class="hash-link" href="#value">#</a></h4><div><p>Initial value of the slider. The value should be between minimumValue
|
||||
and maximumValue, which default to 0 and 1 respectively.
|
||||
Default value is 0.</p><p><em>This is not a controlled component</em>, e.g. if you don't update
|
||||
the value, the component won't be reset to it's inital value.</p></div></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="switchios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-14
@@ -1,14 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
LICENSE file in the root directory of this source tree. An additional grant
|
||||
of patent rights can be found in the PATENTS file in the same directory.</p><p>@flow</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="setstyle"></a><span class="propType">static </span>setStyle<span class="propType">(style: number, animated?: boolean)</span> <a class="hash-link" href="#setstyle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="sethidden"></a><span class="propType">static </span>setHidden<span class="propType">(hidden: boolean, animation: number)</span> <a class="hash-link" href="#sethidden">#</a></h4></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="stylesheet.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-49
@@ -1,49 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="active" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
|
||||
</span><h2><a class="anchor" name="declare-styles"></a>Declare Styles <a class="hash-link" href="#declare-styles">#</a></h2><p>The way to declare styles in React Native is the following:</p><div class="prism language-javascript"><span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
base<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
width<span class="token punctuation">:</span> <span class="token number">38</span><span class="token punctuation">,</span>
|
||||
height<span class="token punctuation">:</span> <span class="token number">38</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
background<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'#222222'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
active<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
borderWidth<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
|
||||
borderColor<span class="token punctuation">:</span> <span class="token string">'#00ff00'</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></div><p><code>StyleSheet.create</code> construct is optional but provides some key advantages. It ensures that the values are <strong>immutable</strong> and <strong>opaque</strong> by transforming them into plain numbers that reference an internal table. By putting it at the end of the file, you also ensure that they are only created once for the application and not on every render.</p><p>All the attribute names and values are a subset of what works on the web. For layout, React Native implements <a href="/react-native/docs/flexbox.html" target="">Flexbox</a>.</p><h2><a class="anchor" name="using-styles"></a>Using Styles <a class="hash-link" href="#using-styles">#</a></h2><p>All the core components accept a style attribute</p><div class="prism language-javascript"><Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>base<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>background<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><p>and also accepts an array of styles</p><div class="prism language-javascript"><View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>base<span class="token punctuation">,</span> styles<span class="token punctuation">.</span>background<span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><p>The behavior is the same as <code>Object.assign</code>: in case of conflicting values, the one from the right-most element will have precedence and falsy values like <code>false</code>, <code>undefined</code> and <code>null</code> will be ignored. A common pattern is to conditionally add a style based on some condition.</p><div class="prism language-javascript"><View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>base<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>active && styles<span class="token punctuation">.</span>active<span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><p>Finally, if you really have to, you can also create style objects in render, but they are highly discouraged. Put them last in the array definition.</p><div class="prism language-javascript"><View
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>base<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
width<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>width<span class="token punctuation">,</span>
|
||||
height<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>width <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>aspectRatio
|
||||
<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></div><h2><a class="anchor" name="pass-styles-around"></a>Pass Styles Around <a class="hash-link" href="#pass-styles-around">#</a></h2><p>In order to let a call site customize the style of your component children, you can pass styles around. Use <code>View.propTypes.style</code> and <code>Text.propTypes.style</code> in order to make sure only styles are being passed.</p><div class="prism language-javascript"><span class="token keyword">var</span> List <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>
|
||||
propTypes<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
style<span class="token punctuation">:</span> View<span class="token punctuation">.</span>propTypes<span class="token punctuation">.</span>style<span class="token punctuation">,</span>
|
||||
elementStyle<span class="token punctuation">:</span> View<span class="token punctuation">.</span>propTypes<span class="token punctuation">.</span>style<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 keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>style<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span>elements<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>element<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>element<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>elementStyle<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 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 comment" spellcheck="true">
|
||||
// ... in another file ...
|
||||
</span><List style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>list<span class="token punctuation">}</span> elementStyle<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>listElement<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div></div><div class="docs-prevnext"><a class="docs-next" href="gesture-responder-system.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-31
@@ -1,31 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
borderRadius<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
|
||||
borderWidth<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
|
||||
borderColor<span class="token punctuation">:</span> <span class="token string">'#d6d7da'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
title<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token number">19</span><span class="token punctuation">,</span>
|
||||
fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
activeTitle<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
color<span class="token punctuation">:</span> <span class="token string">'red'</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></div><p>Use a StyleSheet:</p><div class="prism language-javascript"><View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>title<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>isActive && styles<span class="token punctuation">.</span>activeTitle<span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span></div><p>Code quality:</p><ul><li>By moving styles away from the render function, you're making the code
|
||||
code easier to understand.</li><li>Naming the styles is a good way to add meaning to the low level components
|
||||
in the render function.</li></ul><p>Performance:</p><ul><li>Making a stylesheet from a style object makes it possible to refer to it
|
||||
by ID instead of creating a new style object every time.</li><li>It also allows to send the style only once through the bridge. All
|
||||
subsequent uses are going to refer an id (not implemented yet).</li></ul></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="create"></a><span class="propType">static </span>create<span class="propType">(obj: {[key: string]: any})</span> <a class="hash-link" href="#create">#</a></h4></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="vibrationios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-18
@@ -1,18 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
a controlled component, so you must hook in to the <code>onValueChange</code> callback
|
||||
and update the <code>value</code> prop in order for the component to update, otherwise
|
||||
the user's change will be reverted immediately to reflect <code>props.value</code> as the
|
||||
source of truth.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="disabled"></a>disabled <span class="propType">bool</span> <a class="hash-link" href="#disabled">#</a></h4><div><p>If true the user won't be able to toggle the switch.
|
||||
Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ontintcolor"></a>onTintColor <span class="propType">string</span> <a class="hash-link" href="#ontintcolor">#</a></h4><div><p>Background color when the switch is turned on.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange <span class="propType">function</span> <a class="hash-link" href="#onvaluechange">#</a></h4><div><p>Callback that is called when the user toggles the switch.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="thumbtintcolor"></a>thumbTintColor <span class="propType">string</span> <a class="hash-link" href="#thumbtintcolor">#</a></h4><div><p>Background color for the switch round button.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor <span class="propType">string</span> <a class="hash-link" href="#tintcolor">#</a></h4><div><p>Background color when the switch is turned off.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value <span class="propType">bool</span> <a class="hash-link" href="#value">#</a></h4><div><p>The value of the switch, if true the switch will be turned on.
|
||||
Default value is false.</p></div></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="tabbarios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-12
@@ -1,12 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
(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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-12
@@ -1,12 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
(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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-88
@@ -1,88 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
styling, and touch handling. In the following example, the nested title and
|
||||
body text will inherit the <code>fontFamily</code> from <code>styles.baseText</code>, but the title
|
||||
provides its own additional styles. The title and body will stack on top of
|
||||
each other on account of the literal newlines:</p><div class="prism language-javascript">renderText<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">return</span> <span class="token punctuation">(</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>baseText<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>titleText<span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onPressTitle<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>titleText <span class="token operator">+</span> <span class="token string">'\n\n'</span><span class="token punctuation">}</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text numberOfLines<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">5</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bodyText<span class="token punctuation">}</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<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 keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
baseText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
fontFamily<span class="token punctuation">:</span> <span class="token string">'Cochin'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
titleText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</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></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a>numberOfLines <span class="propType">number</span> <a class="hash-link" href="#numberoflines">#</a></h4><div><p>Used to truncate the text with an elipsis after computing the text
|
||||
layout, including line wrapping, such that the total number of lines does
|
||||
not exceed this number.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress <span class="propType">function</span> <a class="hash-link" href="#onpress">#</a></h4><div><p>This function is called on press. Text intrinsically supports press
|
||||
handling with a default highlight state (which can be disabled with
|
||||
<code>suppressHighlighting</code>).</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="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="view.html#style">View#style...</a></h6></div><div class="prop"><h6 class="propTitle">color <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">containerBackgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">fontFamily <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">fontSize <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">fontStyle <span class="propType">enum('normal', 'italic')</span></h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')</span></h6></div><div class="prop"><h6 class="propTitle">lineHeight <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">textAlign <span class="propType">enum("auto", 'left', 'right', 'center')</span></h6></div><div class="prop"><h6 class="propTitle">writingDirection <span class="propType">enum("auto", 'ltr', 'rtl')</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="suppresshighlighting"></a>suppressHighlighting <span class="propType">bool</span> <a class="hash-link" href="#suppresshighlighting">#</a></h4><div><p>When true, no visual change is made when text is pressed down. By
|
||||
default, a gray oval highlights the text on press down.</p></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="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><div><h2><a class="anchor" name="nested-text"></a>Nested Text <a class="hash-link" href="#nested-text">#</a></h2><p>In iOS, the way to display formatted text is by using <code>NSAttributedString</code>: you give the text that you want to display and annotate ranges with some specific formatting. In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.</p><div class="prism language-javascript"><Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
I am bold
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
and red
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span></div><p>Behind the scenes, this is going to be converted to a flat <code>NSAttributedString</code> that contains the following information</p><div class="prism language-javascript"><span class="token string">"I am bold and red"</span>
|
||||
<span class="token number">0</span><span class="token operator">-</span><span class="token number">9</span><span class="token punctuation">:</span> bold
|
||||
<span class="token number">9</span><span class="token operator">-</span><span class="token number">17</span><span class="token punctuation">:</span> bold<span class="token punctuation">,</span> red</div><h2><a class="anchor" name="containers"></a>Containers <a class="hash-link" href="#containers">#</a></h2><p>The <code><Text></code> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code><Text></code> are no longer rectangles, but wrap when they see the end of the line. </p><div class="prism language-javascript"><Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>First part and <<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>second part<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span><span class="token comment" spellcheck="true">
|
||||
// Text container: all the text flows as if it was one
|
||||
</span><span class="token comment" spellcheck="true">// |First part |
|
||||
</span><span class="token comment" spellcheck="true">// |and second |
|
||||
</span><span class="token comment" spellcheck="true">// |part |
|
||||
</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>First part and <<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>second part<<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 comment" spellcheck="true">
|
||||
// View container: each text is its own block
|
||||
</span><span class="token comment" spellcheck="true">// |First part |
|
||||
</span><span class="token comment" spellcheck="true">// |and |
|
||||
</span><span class="token comment" spellcheck="true">// |second part|</span></div><h2><a class="anchor" name="limited-style-inheritance"></a>Limited Style Inheritance <a class="hash-link" href="#limited-style-inheritance">#</a></h2><p>On the web, the usual way to set a font family and size for the entire document is to write:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">/* CSS, *not* React Native */</span>
|
||||
html <span class="token punctuation">{</span>
|
||||
font<span class="token operator">-</span>family<span class="token punctuation">:</span> <span class="token string">'lucida grande'</span><span class="token punctuation">,</span> tahoma<span class="token punctuation">,</span> verdana<span class="token punctuation">,</span> arial<span class="token punctuation">,</span> sans<span class="token operator">-</span>serif<span class="token punctuation">;</span>
|
||||
font<span class="token operator">-</span>size<span class="token punctuation">:</span> 11px<span class="token punctuation">;</span>
|
||||
color<span class="token punctuation">:</span> #<span class="token number">141823</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>When the browser is trying to render a text node, it's going to go all the way up to the root element of the tree and find an element with a <code>font-size</code> attribute. An unexpected property of this system is that <strong>any</strong> node can have <code>font-size</code> attribute, including a <code><div></code>. This was designed for convenience, even though not really semantically correct.</p><p>In React Native, we are more strict about it: <strong>you must wrap all the text nodes inside of a <code><Text></code> component</strong>; you cannot have a text node directly under a <code><View></code>.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// BAD: will fatal, can't have a text node as child of a <View>
|
||||
</span><View<span class="token operator">></span>
|
||||
Some text
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
// GOOD
|
||||
</span><View<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
Some text
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span></div><p>You also lose the ability to set up a default font for an entire subtree. The recommended way to use consistent fonts and sizes across your application is to create a component <code>MyAppText</code> that includes them and use this component across your app. You can also use this component to make more specific components like <code>MyAppHeaderText</code> for other kinds of text.</p><div class="prism language-javascript"><View<span class="token operator">></span>
|
||||
<MyAppText<span class="token operator">></span>Text styled <span class="token keyword">with</span> the default font <span class="token keyword">for</span> the entire application<<span class="token operator">/</span>MyAppText<span class="token operator">></span>
|
||||
<MyAppHeaderText<span class="token operator">></span>Text styled as a header<<span class="token operator">/</span>MyAppHeaderText<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span></div><p>React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.</p><div class="prism language-javascript"><Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
I am bold
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
and red
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span></div><p>We believe that this more constrained way to style text will yield better apps:</p><ul><li><p>(Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.</p></li><li><p>(Implementor) The implementation of React Native is also simplified. We do not need to have a <code>fontFamily</code> field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.</p></li></ul></div><div class="docs-prevnext"><a class="docs-next" href="textinput.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-37
@@ -1,37 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
keyboard. Props provide configurability for several features, such as auto-
|
||||
correction, auto-capitalization, placeholder text, and different keyboard
|
||||
types, such as a numeric keypad.</p><p>The simplest use case is to plop down a <code>TextInput</code> and subscribe to the
|
||||
<code>onChangeText</code> events to read the user input. There are also other events, such
|
||||
as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A simple
|
||||
example:</p><div class="prism language-javascript"><View<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> borderColor<span class="token punctuation">:</span> <span class="token string">'gray'</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>
|
||||
onChangeText<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>input<span class="token punctuation">:</span> text<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>
|
||||
<Text<span class="token operator">></span><span class="token punctuation">{</span><span class="token string">'user input: '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>input<span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span></div><p>The <code>value</code> prop can be used to set the value of the input in order to make
|
||||
the state of the component clear, but <TextInput> does not behave as a true
|
||||
controlled component by default because all operations are asynchronous.
|
||||
Setting <code>value</code> once is like setting the default value, but you can change it
|
||||
continuously based on <code>onChangeText</code> events as well. If you really want to
|
||||
force the component to always revert to the value you are setting, you can
|
||||
set <code>controlled={true}</code>.</p><p>The <code>multiline</code> prop is not supported in all releases, and some props are
|
||||
multiline only.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocapitalize"></a>autoCapitalize <span class="propType">enum('none', 'sentences', 'words', 'characters')</span> <a class="hash-link" href="#autocapitalize">#</a></h4><div><p>Can tell TextInput to automatically capitalize certain characters.</p><ul><li>characters: all characters,</li><li>words: first letter of each word</li><li>sentences: first letter of each sentence (default)</li><li>none: don't auto capitalize anything</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocorrect"></a>autoCorrect <span class="propType">bool</span> <a class="hash-link" href="#autocorrect">#</a></h4><div><p>If false, disables auto-correct. Default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autofocus"></a>autoFocus <span class="propType">bool</span> <a class="hash-link" href="#autofocus">#</a></h4><div><p>If true, focuses the input on componentDidMount. Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bufferdelay"></a>bufferDelay <span class="propType">number</span> <a class="hash-link" href="#bufferdelay">#</a></h4><div><p>This helps avoid drops characters due to race conditions between JS and
|
||||
the native text input. The default should be fine, but if you're
|
||||
potentially doing very slow operations on every keystroke then you may
|
||||
want to try increasing this.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="clearbuttonmode"></a>clearButtonMode <span class="propType">enum('never', 'while-editing', 'unless-editing', 'always')</span> <a class="hash-link" href="#clearbuttonmode">#</a></h4><div><p>When the clear button should appear on the right side of the text view</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="controlled"></a>controlled <span class="propType">bool</span> <a class="hash-link" href="#controlled">#</a></h4><div><p>If you really want this to behave as a controlled component, you can set
|
||||
this true, but you will probably see flickering, dropped keystrokes,
|
||||
and/or laggy typing, depending on how you process onChange events.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="editable"></a>editable <span class="propType">bool</span> <a class="hash-link" href="#editable">#</a></h4><div><p>If false, text is not editable. Default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardtype"></a>keyboardType <span class="propType">enum('default', 'numeric')</span> <a class="hash-link" href="#keyboardtype">#</a></h4><div><p>Determines which keyboard to open, e.g.<code>numeric</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="multiline"></a>multiline <span class="propType">bool</span> <a class="hash-link" href="#multiline">#</a></h4><div><p>If true, the text input can be multiple lines. Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onblur"></a>onBlur <span class="propType">function</span> <a class="hash-link" href="#onblur">#</a></h4><div><p>Callback that is called when the text input is blurred</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchangetext"></a>onChangeText <span class="propType">function</span> <a class="hash-link" href="#onchangetext">#</a></h4><div><p>(text: string) => void</p><p>Callback that is called when the text input's text changes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendediting"></a>onEndEditing <span class="propType">function</span> <a class="hash-link" href="#onendediting">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onfocus"></a>onFocus <span class="propType">function</span> <a class="hash-link" href="#onfocus">#</a></h4><div><p>Callback that is called when the text input is focused</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onsubmitediting"></a>onSubmitEditing <span class="propType">function</span> <a class="hash-link" href="#onsubmitediting">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholder"></a>placeholder <span class="propType">string</span> <a class="hash-link" href="#placeholder">#</a></h4><div><p>The string that will be rendered before text input has been entered</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholdertextcolor"></a>placeholderTextColor <span class="propType">string</span> <a class="hash-link" href="#placeholdertextcolor">#</a></h4><div><p>The text color of the placeholder string</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectionstate"></a>selectionState <span class="propType">DocumentSelectionState</span> <a class="hash-link" href="#selectionstate">#</a></h4><div><p>See DocumentSelectionState.js, some state that is responsible for
|
||||
maintaining selection information for a document</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType"><a href="text.html#style">Text#style</a></span> <a class="hash-link" href="#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value <span class="propType">string</span> <a class="hash-link" href="#value">#</a></h4><div><p>The default value for the text input</p></div></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="touchablehighlight.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-28
@@ -1,28 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
<span class="token comment" spellcheck="true"> // ...long-running synchronous task...
|
||||
</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Compare this to other scheduling alternatives:</p><ul><li>requestAnimationFrame(): for code that animates a view over time.</li><li>setImmediate/setTimeout/setInterval(): run code later, note this may delay animations.</li><li>runAfterInteractions(): run code later, without delaying active animations.</li></ul><p>The touch handling system considers one or more active touches to be an 'interaction' and will delay <code>runAfterInteractions()</code> callbacks until all touches have ended or been cancelled.</p><p>InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:</p><div class="prism language-javascript"><span class="token keyword">var</span> handle <span class="token operator">=</span> InteractionManager<span class="token punctuation">.</span><span class="token function">createInteractionHandle<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
|
||||
// run animation... (`runAfterInteractions` tasks are queued)
|
||||
</span><span class="token comment" spellcheck="true">// later, on animation completion:
|
||||
</span>InteractionManager<span class="token punctuation">.</span><span class="token function">clearInteractionHandle<span class="token punctuation">(</span></span>handle<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
|
||||
// queued tasks run if all handles were cleared</span></div><h2><a class="anchor" name="timermixin"></a>TimerMixin <a class="hash-link" href="#timermixin">#</a></h2><p>We found out that the primary cause of fatals in apps created with React Native was due to timers firing after a component was unmounted. To solve this recurring issue, we introduced <code>TimerMixin</code>. If you include <code>TimerMixin</code>, then you can replace your calls to <code>setTimeout(fn, 500)</code> with <code>this.setTimeout(fn, 500)</code> (just prepend <code>this.</code>) and everything will be properly cleaned up for you when the component unmounts.</p><div class="prism language-javascript"><span class="token keyword">var</span> TimerMixin <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-timer-mixin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> Component <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>
|
||||
mixins<span class="token punctuation">:</span> <span class="token punctuation">[</span>TimerMixin<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
componentDidMount<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">this</span><span class="token punctuation">.</span><span class="token function">setTimeout<span class="token punctuation">(</span></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> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'I do not leak!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token number">500</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></div><p>We highly recommend never using bare timers and always using this mixin, it will save you from a lot of hard to track down bugs.</p></div><div class="docs-prevnext"></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
@@ -1,28 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
On press down, the opacity of the wrapped view is decreased, which allows
|
||||
the underlay color to show through, darkening or tinting the view. The
|
||||
underlay comes from adding a view to the view hierarchy, which can sometimes
|
||||
cause unwanted visual artifacts if not used correctly, for example if the
|
||||
backgroundColor of the wrapped view isn't explicitly set to an opaque color.</p><p>Example:</p><div class="prism language-javascript">renderButton<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">return</span> <span class="token punctuation">(</span>
|
||||
<TouchableHighlight onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressButton<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Image
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span>
|
||||
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">'image!myButton'</span><span class="token punctuation">)</span><span class="token punctuation">}</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></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="touchablewithoutfeedback.html#proptypes">TouchableWithoutFeedback props...</a> <a class="hash-link" href="#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity <span class="propType">number</span> <a class="hash-link" href="#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
|
||||
active.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType"><a href="view.html#style">View#style</a></span> <a class="hash-link" href="#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlaycolor"></a>underlayColor <span class="propType">string</span> <a class="hash-link" href="#underlaycolor">#</a></h4><div><p>The color of the underlay that will show through when the touch is
|
||||
active.</p></div></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="touchableopacity.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-25
@@ -1,25 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
On press down, the opacity of the wrapped view is decreased, dimming it.
|
||||
This is done without actually changing the view hierarchy, and in general is
|
||||
easy to add to an app without weird side-effects.</p><p>Example:</p><div class="prism language-javascript">renderButton<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">return</span> <span class="token punctuation">(</span>
|
||||
<TouchableOpacity onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressButton<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Image
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span>
|
||||
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">'image!myButton'</span><span class="token punctuation">)</span><span class="token punctuation">}</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></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="touchablewithoutfeedback.html#proptypes">TouchableWithoutFeedback props...</a> <a class="hash-link" href="#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity <span class="propType">number</span> <a class="hash-link" href="#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
|
||||
active.</p></div></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="touchablewithoutfeedback.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
@@ -1,15 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
respond to press should have a visual feedback when touched. This is
|
||||
one of the primary reason a "web" app doesn't feel "native".</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlongpress"></a>onLongPress <span class="propType">function</span> <a class="hash-link" href="#onlongpress">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress <span class="propType">function</span> <a class="hash-link" href="#onpress">#</a></h4><div><p>Called when the touch is released, but not if cancelled (e.g. by a scroll
|
||||
that steals the responder lock).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpressin"></a>onPressIn <span class="propType">function</span> <a class="hash-link" href="#onpressin">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpressout"></a>onPressOut <span class="propType">function</span> <a class="hash-link" href="#onpressout">#</a></h4></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="view.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-299
@@ -1,299 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
<span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Title'</span><span class="token punctuation">,</span> year<span class="token punctuation">:</span> <span class="token string">'2015'</span><span class="token punctuation">,</span> posters<span class="token punctuation">:</span> <span class="token punctuation">{</span>thumbnail<span class="token punctuation">:</span> <span class="token string">'http://i.imgur.com/UePbdph.jpg'</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></div><h3><a class="anchor" name="render-a-movie"></a>Render a movie <a class="hash-link" href="#render-a-movie">#</a></h3><p>We're going to render the title, year, and thumbnail for the movie. Since thumbnail is an Image component in React Native, add Image to the list of React requires below.</p><div class="prism language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
Image<span class="token punctuation">,</span>
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
View<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span></div><p>Now change the render function so that we're rendering the data mentioned above rather than hello world.</p><div class="prism language-javascript"> 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 keyword">var</span> movie <span class="token operator">=</span> MOCKED_MOVIES_DATA<span class="token punctuation">[</span><span class="token number">0</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>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text<span class="token operator">></span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>title<span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>year<span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> movie<span class="token punctuation">.</span>posters<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span><span class="token punctuation">}</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></div><p>Press cmd+R and you should see "Title" above "2015". Notice that the Image doesn't render anything. This is because we haven't specified the width and height of the image we want to render. This is done via styles. While we're changing the styles let's also clean up the styles we're no longer using.</p><div class="prism language-javascript"><span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
justifyContent<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'#F5FCFF'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
thumbnail<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
width<span class="token punctuation">:</span> <span class="token number">53</span><span class="token punctuation">,</span>
|
||||
height<span class="token punctuation">:</span> <span class="token number">81</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></div><p>And lastly we need to apply this style to the Image component:</p><div class="prism language-javascript"> <Image
|
||||
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> movie<span class="token punctuation">.</span>posters<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span></div><p>Press cmd+R and the image should now render.</p><span><div class="tutorial-mock">
|
||||
<img src="/react-native/img/TutorialMock.png" />
|
||||
</div>
|
||||
|
||||
|
||||
</span><h3><a class="anchor" name="add-some-styling"></a>Add some styling <a class="hash-link" href="#add-some-styling">#</a></h3><p>Great, we've rendered our data. Now let's make it look better. I'd like to put the text to the right of the image and make the title larger and centered within that area:</p><div class="prism language-javascript"><span class="token operator">+-</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">+</span>
|
||||
<span class="token operator">|</span><span class="token operator">+-</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">++</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">+</span><span class="token operator">|</span>
|
||||
<span class="token operator">||</span> <span class="token operator">||</span> Title <span class="token operator">||</span>
|
||||
<span class="token operator">||</span> Image <span class="token operator">||</span> <span class="token operator">||</span>
|
||||
<span class="token operator">||</span> <span class="token operator">||</span> Year <span class="token operator">||</span>
|
||||
<span class="token operator">|</span><span class="token operator">+-</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">++</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">+</span><span class="token operator">|</span>
|
||||
<span class="token operator">+-</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">+</span></div><p>We'll need to add another container in order to vertically lay out components within horizontally layed out components.</p><div class="prism language-javascript"> <span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Image
|
||||
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> movie<span class="token punctuation">.</span>posters<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>rightContainer<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>title<span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>year<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>year<span class="token punctuation">}</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 operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Not too much has changed, we added a container around the Texts and then moved them after the Image (because they're to the right of the Image). Let's see what the style changes look like:</p><div class="prism language-javascript"> container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span>
|
||||
justifyContent<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'#F5FCFF'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>We use FlexBox for layout - see <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">this great guide</a> to learn more about it.</p><p>In the above code snippet, we simply added <code>flexDirection: 'row'</code> that will make children of our main container to be layed out horizontally instead of vertically.</p><p>Now add another style to the JS <code>style</code> object:</p><div class="prism language-javascript"> rightContainer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>This means that the <code>rightContainer</code> takes up the remaining space in the parent container that isn't taken up by the Image. If this doesn't make sense, add a <code>backgroundColor</code> to <code>rightContainer</code> and then try removing the <code>flex: 1</code>. You'll see that this causes the container's size to be the minimum size that fits its children.</p><p>Styling the text is pretty straightforward:</p><div class="prism language-javascript"> title<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
marginBottom<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
year<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>Go ahead and press cmd+R and you'll see the updated view.</p><span><div class="tutorial-mock">
|
||||
<img src="/react-native/img/TutorialStyledMock.png" />
|
||||
</div>
|
||||
|
||||
</span><h3><a class="anchor" name="fetching-real-data"></a>Fetching real data <a class="hash-link" href="#fetching-real-data">#</a></h3><p>Fetching data from Rotten Tomatoes's API isn't really relevant to learning React Native so feel free to breeze through this section.</p><p>Add the following constants to the top of the file (typically below the requires) to create the REQUEST_URL used to request data with.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">/**
|
||||
* For quota reasons we replaced the Rotten Tomatoes' API with a sample data of
|
||||
* their very own API that lives in React Native's Gihub repo.
|
||||
*/</span>
|
||||
<span class="token keyword">var</span> REQUEST_URL <span class="token operator">=</span> <span class="token string">'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'</span><span class="token punctuation">;</span></div><p>Add some initial state to our application so that we can check <code>this.state.movies === null</code> to determine whether the movies data has been loaded or not. We can set this data when the response comes back with <code>this.setState({movies: moviesData})</code>. Add this code just above the render function inside our React class.</p><div class="prism language-javascript"> 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">return</span> <span class="token punctuation">{</span>
|
||||
movies<span class="token punctuation">:</span> <span class="token keyword">null</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></div><p>We want to send off the request after the component has finished loading. <code>componentDidMount</code> is a function of React components that React will call exactly once, just after the component has been loaded.</p><div class="prism language-javascript"> componentDidMount<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">this</span><span class="token punctuation">.</span><span class="token function">fetchData<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>Now add <code>fetchData</code> function used above to our main component. This method will be responsible for handling data fetching. All you need to do is call <code>this.setState({movies: data})</code> after resolving the promise chain because the way React works is that <code>setState</code> actually triggers a re-render and then the render function will notice that <code>this.state.movies</code> is no longer <code>null</code>. Note that we call <code>done()</code> at the end of the promise chain - always make sure to call <code>done()</code> or any errors thrown will get swallowed.</p><div class="prism language-javascript"> fetchData<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 function">fetch<span class="token punctuation">(</span></span>REQUEST_URL<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> response<span class="token punctuation">.</span><span class="token function">json<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>responseData<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
movies<span class="token punctuation">:</span> responseData<span class="token punctuation">.</span>movies<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 function">done<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>Now modify the render function to render a loading view if we don't have any movies data, and to render the first movie otherwise.</p><div class="prism language-javascript"> 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 keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>movies<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderLoadingView<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">var</span> movie <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>movies<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderMovie<span class="token punctuation">(</span></span>movie<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
|
||||
renderLoadingView<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">return</span> <span class="token punctuation">(</span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
Loading movies<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</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>
|
||||
|
||||
renderMovie<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>movie<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>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Image
|
||||
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> movie<span class="token punctuation">.</span>posters<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>rightContainer<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>title<span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>year<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>year<span class="token punctuation">}</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 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></div><p>Now press cmd+R and you should see "Loading movies..." until the response comes back, then it will render the first movie it fetched from Rotten Tomatoes.</p><span><div class="tutorial-mock">
|
||||
<img src="/react-native/img/TutorialSingleFetched.png" />
|
||||
</div>
|
||||
|
||||
</span><h2><a class="anchor" name="listview"></a>ListView <a class="hash-link" href="#listview">#</a></h2><p>Let's now modify this application to render all of this data in a <code>ListView</code> component, rather than just rendering the first movie.</p><p>Why is a <code>ListView</code> better than just rendering all of these elements or putting them in a <code>ScrollView</code>? Despite React being fast, rendering a possibly infinite list of elements could be slow. <code>ListView</code> schedules rendering of views so that you only display the ones on screen and those already rendered but off screen are removed from the native view hierarchy.</p><p>First thing's first: add the <code>ListView</code> require to the top of the file.</p><div class="prism language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
Image<span class="token punctuation">,</span>
|
||||
ListView<span class="token punctuation">,</span>
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
View<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span></div><p>Now modify the render function so that once we have our data it renders a ListView of movies instead of a single movie.</p><div class="prism language-javascript"> 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 keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loaded<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderLoadingView<span class="token punctuation">(</span></span><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>
|
||||
<ListView
|
||||
dataSource<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">}</span>
|
||||
renderRow<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>renderMovie<span class="token punctuation">}</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>listView<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></div><p>The <code>DataSource</code> is an interface that <code>ListView</code> is using to determine which rows have changed over the course of updates.</p><p>You'll notice we used <code>dataSource</code> from <code>this.state</code>. The next step is to add an empty <code>dataSource</code> to the object returned by <code>getInitialState</code>. Also, now that we're storing the data in <code>dataSource</code>, we should no longer use <code>this.state.movies</code> to avoid storing data twice. We can use boolean property of the state (<code>this.state.loaded</code>) to tell whether data fetching has finished.</p><div class="prism language-javascript"> 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">return</span> <span class="token punctuation">{</span>
|
||||
dataSource<span class="token punctuation">:</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>row1<span class="token punctuation">,</span> row2<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> row1 <span class="token operator">!</span><span class="token operator">==</span> row2<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
loaded<span class="token punctuation">:</span> <span class="token boolean">false</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></div><p>And here is the modified <code>fetchData</code> method that updates the state accordingly:</p><div class="prism language-javascript"> fetchData<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 function">fetch<span class="token punctuation">(</span></span>REQUEST_URL<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> response<span class="token punctuation">.</span><span class="token function">json<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>responseData<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
dataSource<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">.</span><span class="token function">cloneWithRows<span class="token punctuation">(</span></span>responseData<span class="token punctuation">.</span>movies<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
loaded<span class="token punctuation">:</span> <span class="token boolean">true</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 function">done<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>Finally, we add styles for the <code>ListView</code> component to the <code>styles</code> JS object:</p><div class="prism language-javascript"> listView<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
paddingTop<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'#F5FCFF'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>And here's the final result:</p><span><div class="tutorial-mock">
|
||||
<img src="/react-native/img/TutorialFinal.png" />
|
||||
</div>
|
||||
|
||||
</span><p>There's still some work to be done to make it a fully functional app such as: adding navigation, search, infinite scroll loading, etc. Check the <a href="https://github.com/facebook/react-native/tree/master/Examples/Movies" target="_blank">Movies Example</a> to see it all working.</p><h3><a class="anchor" name="final-source-code"></a>Final source code <a class="hash-link" href="#final-source-code">#</a></h3><div class="prism language-javascript"><span class="token comment" spellcheck="true">/**
|
||||
* Sample React Native App
|
||||
* https://github.com/facebook/react-native
|
||||
*/</span>
|
||||
<span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> <span class="token punctuation">{</span>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
Image<span class="token punctuation">,</span>
|
||||
ListView<span class="token punctuation">,</span>
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
View<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> API_KEY <span class="token operator">=</span> <span class="token string">'7waqfqbprs7pajbz28mqf6vz'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> API_URL <span class="token operator">=</span> <span class="token string">'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> PAGE_SIZE <span class="token operator">=</span> <span class="token number">25</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> PARAMS <span class="token operator">=</span> <span class="token string">'?apikey='</span> <span class="token operator">+</span> API_KEY <span class="token operator">+</span> <span class="token string">'&page_limit='</span> <span class="token operator">+</span> PAGE_SIZE<span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> REQUEST_URL <span class="token operator">=</span> API_URL <span class="token operator">+</span> PARAMS<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> AwesomeProject <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>
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
dataSource<span class="token punctuation">:</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>row1<span class="token punctuation">,</span> row2<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> row1 <span class="token operator">!</span><span class="token operator">==</span> row2<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
loaded<span class="token punctuation">:</span> <span class="token boolean">false</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>
|
||||
|
||||
componentDidMount<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">this</span><span class="token punctuation">.</span><span class="token function">fetchData<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
|
||||
fetchData<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 function">fetch<span class="token punctuation">(</span></span>REQUEST_URL<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> response<span class="token punctuation">.</span><span class="token function">json<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>responseData<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
dataSource<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">.</span><span class="token function">cloneWithRows<span class="token punctuation">(</span></span>responseData<span class="token punctuation">.</span>movies<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
loaded<span class="token punctuation">:</span> <span class="token boolean">true</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 function">done<span class="token punctuation">(</span></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 keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loaded<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderLoadingView<span class="token punctuation">(</span></span><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>
|
||||
<ListView
|
||||
dataSource<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">}</span>
|
||||
renderRow<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>renderMovie<span class="token punctuation">}</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>listView<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>
|
||||
|
||||
renderLoadingView<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">return</span> <span class="token punctuation">(</span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
Loading movies<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</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>
|
||||
|
||||
renderMovie<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>movie<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>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Image
|
||||
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> movie<span class="token punctuation">.</span>posters<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>rightContainer<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>title<span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>year<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>year<span class="token punctuation">}</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 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 keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span>
|
||||
justifyContent<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'#F5FCFF'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
rightContainer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
title<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
marginBottom<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
year<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
thumbnail<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
width<span class="token punctuation">:</span> <span class="token number">53</span><span class="token punctuation">,</span>
|
||||
height<span class="token punctuation">:</span> <span class="token number">81</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
listView<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
paddingTop<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'#F5FCFF'</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> AwesomeProject<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="videos.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-15
@@ -1,15 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alLine truncated
|
||||
function will trigger a one second vibration. The vibration is asynchronous
|
||||
so this method will return immediately.</p><p>There will be no effect on devices that do not support Vibration, eg. the iOS
|
||||
simulator.</p><p>Vibration patterns are currently unsupported.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="vibrate"></a><span class="propType">static </span>vibrate<span class="propType">()</span> <a class="hash-link" href="#vibrate">#</a></h4></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="flexbox.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-27
@@ -1,27 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
|
||||
</span><span><iframe width="650" height="315" src="//www.youtube.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
</span><span><iframe width="650" height="315" src="//www.youtube.com/embed/X6YbAKiLCLU" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
</span><h3><a class="anchor" name="the-changelog-149-https-thechangelog-com-149"></a><a href="https://thechangelog.com/149/" target="_blank">The Changelog #149</a> <a class="hash-link" href="#the-changelog-149-https-thechangelog-com-149">#</a></h3><p>With Christopher "vjeux" Chedeau and Spencer Ahrens</p><span><audio src="http://fdlyr.co/d/changelog/cdn.5by5.tv/audio/broadcasts/changelog/2015/changelog-149.mp3" controls="controls" preload="none"></audio>
|
||||
|
||||
</span><h3><a class="anchor" name="jsjabber-146-http-devchat-tv-js-jabber-146-jsj-react-with-christopher-chedeau-and-jordan-walke"></a><a href="http://devchat.tv/js-jabber/146-jsj-react-with-christopher-chedeau-and-jordan-walke" target="_blank">JSJabber #146</a> <a class="hash-link" href="#jsjabber-146-http-devchat-tv-js-jabber-146-jsj-react-with-christopher-chedeau-and-jordan-walke">#</a></h3><p>With Christopher "vjeux" Chedeau and Jordan Walke</p><span><audio controls="">
|
||||
<source ng-src="http://www.podtrac.com/pts/redirect.mp3/media.devchat.tv/js-jabber/JSJ146React.mp3?player=true" type="audio/mpeg" src="http://www.podtrac.com/pts/redirect.mp3/media.devchat.tv/js-jabber/JSJ146React.mp3?player=true">
|
||||
<p>
|
||||
This player is only available in HTML5 enabled browsers. Please update your browser or
|
||||
<a download="146-jsj-react-with-christopher-chedeau-and-jordan-walke.mp3" href="http://www.podtrac.com/pts/redirect.mp3/media.devchat.tv/js-jabber/JSJ146React.mp3?download=true?download=true">download the episode</a>
|
||||
</p>
|
||||
</audio>
|
||||
</span></div><div class="docs-prevnext"><a class="docs-next" href="style.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-48
@@ -1,48 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
container that supports layout with flexbox, style, some touch handling, and
|
||||
accessibility controls, and is designed to be nested inside other views and
|
||||
to have 0 to many children of any type. <code>View</code> maps directly to the native
|
||||
view equivalent on whatever platform react is running on, whether that is a
|
||||
<code>UIView</code>, <code><div></code>, <code>android.view</code>, etc. This example creates a <code>View</code> that
|
||||
wraps two colored boxes and custom component in a row with padding.</p><div class="prism language-javascript"><View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> flex<span class="token punctuation">:</span> <span class="token number">0.3</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> flex<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<MyCustomComponent <span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>customProps<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span></div><p><code>View</code>s are designed to be used with <code>StyleSheet</code>s for clarity and
|
||||
performance, although inline styles are also supported.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#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="#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="#accessible">#</a></h4><div><p>When true, 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="onmoveshouldsetresponder"></a>onMoveShouldSetResponder <span class="propType">function</span> <a class="hash-link" href="#onmoveshouldsetresponder">#</a></h4><div><p>For most touch interactions, you'll simply want to wrap your component in
|
||||
<code>TouchableHighlight</code> or <code>TouchableOpacity</code>. Check out <code>Touchable.js</code>,
|
||||
<code>ScrollResponder.js</code> and <code>ResponderEventPlugin.js</code> for more discussion.</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="#onrespondergrant">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondermove"></a>onResponderMove <span class="propType">function</span> <a class="hash-link" href="#onrespondermove">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderreject"></a>onResponderReject <span class="propType">function</span> <a class="hash-link" href="#onresponderreject">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderrelease"></a>onResponderRelease <span class="propType">function</span> <a class="hash-link" href="#onresponderrelease">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminate"></a>onResponderTerminate <span class="propType">function</span> <a class="hash-link" href="#onresponderterminate">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminationrequest"></a>onResponderTerminationRequest <span class="propType">function</span> <a class="hash-link" href="#onresponderterminationrequest">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetresponder"></a>onStartShouldSetResponder <span class="propType">function</span> <a class="hash-link" href="#onstartshouldsetresponder">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetrespondercapture"></a>onStartShouldSetResponderCapture <span class="propType">function</span> <a class="hash-link" href="#onstartshouldsetrespondercapture">#</a></h4></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="#pointerevents">#</a></h4><div><p>In the absence of <code>auto</code> property, <code>none</code> is much like <code>CSS</code>'s <code>none</code>
|
||||
value. <code>box-none</code> is as if you had applied the <code>CSS</code> class:</p><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>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">.</span>box<span class="token operator">-</span>none <span class="token operator">*</span> <span class="token punctuation">{</span>
|
||||
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> all<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p><code>box-only</code> is the equivalent of</p><div class="prism language-javascript"><span class="token punctuation">.</span>box<span class="token operator">-</span>only <span class="token punctuation">{</span>
|
||||
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> all<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">.</span>box<span class="token operator">-</span>only <span class="token operator">*</span> <span class="token punctuation">{</span>
|
||||
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>But since <code>pointerEvents</code> does not affect layout/appearance, and we are
|
||||
already deviating from the spec by adding additional modes, we opt to not
|
||||
include <code>pointerEvents</code> on <code>style</code>. On some platforms, we would need to
|
||||
implement it as a <code>className</code> anyways. Using <code>style</code> or not is an
|
||||
implementation detail of the platform.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews <span class="propType">bool</span> <a class="hash-link" href="#removeclippedsubviews">#</a></h4><div><p>This is a special performance property exposed by RCTView and is useful
|
||||
for scrolling content when there are many subviews, most of which are
|
||||
offscreen. For this property to be effective, it must be applied to a
|
||||
view that contains many subviews that extend outside its bound. The
|
||||
subviews must also have overflow: hidden, 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="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType">string</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">string</span></h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType">string</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">rotation <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">scaleX <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">scaleY <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">shadowColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">shadowOffset <span class="propType">{h: number, w: number}</span></h6></div><div class="prop"><h6 class="propTitle">shadowOpacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">shadowRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">transformMatrix <span class="propType">[number]</span></h6></div><div class="prop"><h6 class="propTitle">translateX <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">translateY <span class="propType">number</span></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="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="webview.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
+11
-12
@@ -1,12 +1,11 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
|
||||
(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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
</script></body></html>
|
||||
Error: `next: linking-libraries` in nativemodulesios doesn't exist
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
|
||||
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
|
||||
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
|
||||
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
|
||||
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
|
||||
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
|
||||
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
|
||||
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
|
||||
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
|
||||
Reference in new issue
Block a user