mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Travis CI
33 lines
12 KiB
HTML
33 lines
12 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | Build Native Apps Using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="React Native | Build 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"><meta property="og:description" content="Build Native Apps Using React"><link rel="shortcut icon" href="/react-native/img/favicon.png"><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/logo.png">React Native</a><ul class="nav-site"><li><a href="/react-native/docs/getting-started.html#content" class="active">docs</a></li><li><a href="/react-native/support.html" class="">support</a></li><li><a href="http://github.com/facebook/react-native" class="">github</a></li></ul></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></ul></div><div class="nav-docs-section"><h3>Community Resources</h3><ul><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/pixels.html#content">Physical vs Logical Pixels</a></li><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/nativemodulesios.html#content">Native Modules (iOS)</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/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/alertios.html#content">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/animation.html#content">Animation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstate.html#content">AppState</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/interactionmanager.html#content">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/netinfo.html#content">NetInfo</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/stylesheet.html#content">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/vibrationios.html#content">VibrationIOS</a></li></ul></div><div class="nav-docs-section"><h3>styles</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/layoutproptypes.html#content">LayoutPropTypes</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/timers.html#content">Timers</a></li></ul></div></div><div class="inner-content"><a id="content"></a><h1>Getting Started</h1><div><p>Our first React Native implementation is <code>ReactKit</code>, targeting iOS. We are also
|
|
working on an Android implementation which we will release later. <code>ReactKit</code>
|
|
apps are built using the <a href="https://github.com/facebook/react" target="_blank">React JS</a> framework, and render directly to
|
|
native UIKit elements using a fully asynchronous architecture. There is no
|
|
browser and no HTML. We have picked what we think is the best set of features
|
|
from these and other technologies to build what we hope to become the best
|
|
product development framework available, with an emphasis on iteration speed,
|
|
developer delight, continuity of technology, and absolutely beautiful and fast
|
|
products with no compromises in quality or capability.</p><h2><a class="anchor" name="requirements"></a>Requirements <a class="hash-link" href="#requirements">#</a></h2><ol><li>OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.</li><li>New to Xcode? <a href="https://developer.apple.com/xcode/downloads/" target="_blank">Download it</a> from the Mac App Store.</li><li><a href="http://brew.sh/" target="_blank">Homebrew</a> is the recommended way to install node, watchman, and flow.</li><li>New to node or npm? <code>brew install node</code></li><li>We recommend installing <a href="https://facebook.github.io/watchman/docs/install.html" target="_blank">watchman</a>, otherwise you might hit a node file watching bug. <code>brew install watchman</code></li><li>If you want to use <a href="http://www.flowtype.org" target="_blank">flow</a>, <code>brew install flow</code></li></ol><h2><a class="anchor" name="quick-start"></a>Quick start <a class="hash-link" href="#quick-start">#</a></h2><p>Get up and running with our Movies sample app:</p><ol><li><p>Once you have the repo cloned and met all the requirements above, start the
|
|
packager that will transform your JS code on-the-fly:</p><div class="prism language-javascript">npm install
|
|
npm start</div></li><li>Open the <code>Examples/Movies/Movies.xcodeproj</code> project in Xcode.</li><li>Make sure the target is set to <code>Movies</code> and that you have an iOS simulator
|
|
selected to run the app.</li><li>Build and run the project with the Xcode run button.</li></ol><p>You should now see the Movies app running on your iOS simulator.
|
|
Congratulations! You've just successfully run your first React Native app.</p><p>Now try editing a JavaScript file and viewing your changes. Let's change the
|
|
movie search placeholder text:</p><ol><li>Open the <code>Examples/Movies/SearchScreen.js</code> file in your favorite JavaScript
|
|
editor.</li><li>Look for the current search placeholder text and change it to "Search for an
|
|
awesome movie...".</li><li>Hit cmd+R (<a href="http://openradar.appspot.com/19613391" target="_blank">twice</a>) in your iOS simulator to reload the app and see your change.
|
|
If you don't immediately see your changes, try restarting your app within Xcode.</li></ol><p>Feel free to browse the Movies sample files and customize various properties to
|
|
get familiar with the codebase and React Native.</p><p>Also check out the UI Component Explorer for more sample code:
|
|
<code>Examples/UIExplorer/UIExplorer.xcodeproj</code>. <strong>Make sure to close the Movies
|
|
project first - Xcode will break if you have two projects open that reference
|
|
the same library.</strong></p><h2><a class="anchor" name="troubleshooting"></a>Troubleshooting <a class="hash-link" href="#troubleshooting">#</a></h2><ul><li>Xcode will break if you have two examples open at the same time.</li><li>If <code>npm start</code> fails with log spew like:<div class="prism language-javascript"><span class="token number">2015</span><span class="token operator">-</span><span class="token number">02</span><span class="token operator">-</span><span class="token number">02</span> <span class="token number">10</span><span class="token punctuation">:</span><span class="token number">56</span> node<span class="token punctuation">[</span><span class="token number">24294</span><span class="token punctuation">]</span> <span class="token punctuation">(</span>FSEvents<span class="token punctuation">.</span>framework<span class="token punctuation">)</span> FSEventStreamStart<span class="token punctuation">:</span> register_with_server<span class="token punctuation">:</span> ERROR<span class="token punctuation">:</span> <span class="token function">f2d_register_rpc<span class="token punctuation">(</span></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">null</span><span class="token punctuation">)</span> <span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">21</span><span class="token punctuation">)</span></div>then you've hit the node file watching bug - <code>brew install watchman</code> should fix the issue.</li><li>Jest testing does not yet work on node versions after 0.10.x.</li><li>You can verify the packager is working by loading the <a href="http://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle" target="_blank">bundle</a> in your browser and
|
|
inspecting the contents.</li></ul><p>Please report any other issues you encounter so we can fix them ASAP.</p></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> |