mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Travis CI
110 lines
24 KiB
HTML
110 lines
24 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/header_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://facebook.github.io/react" class="">react</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="" 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/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/reactnavigator.html#content">ReactNavigator</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/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/panresponder.html#content">PanResponder</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/pushnotificationios.html#content">PushNotificationIOS</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>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/flexbox.html#content">Flexbox</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/geolocation.html#content">GeoLocation</a></li><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>Tutorial</h1><div><h2><a class="anchor" name="preface"></a>Preface <a class="hash-link" href="#preface">#</a></h2><p>This is a tutorial that aims to get you up to speed with writing iOS apps using React Native. If you want to learn what React Native is and why Facebook built it, check out this blog post: <strong>[INSERT BLOG POST URL]</strong>.</p><p>We assume you have experience writing websites with ReactJS. If not, you can learn about ReactJS <a href="http://facebook.github.io/react/" target="_blank">here</a>.</p><h2><a class="anchor" name="setup"></a>Setup <a class="hash-link" href="#setup">#</a></h2><p>React Native has a few requirements which you can find on the <a href="https://github.com/facebook/react-native#requirements" target="_blank">github page</a> (specifically OSX, Xcode, Homebrew, node, npm, watchman, and (optionally) flow)</p><p>After installing these dependencies there are two simple commands to get a React Native project all set up for development.</p><ol><li><p><code>npm install -g react-native-cli</code></p><p> <code>react-native-cli</code> is a command line interface that does the rest of the set up. It’s also an npm module so you can get it very easily. This will install <code>react-native-cli</code> so you can run it as a command in your terminal. You only need to do this once ever.</p></li><li><p><code>react-native init AwesomeProject</code></p><p> This command fetches the React Native source code, installs all of the other npm modules that it depends on, and creates a new Xcode project in <code>AwesomeProject/AwesomeProject.xcodeproj</code>.</p></li></ol><h2><a class="anchor" name="development"></a>Development <a class="hash-link" href="#development">#</a></h2><p>You can now open this new project (<code>AwesomeProject/AwesomeProject.xcodeproj</code>) in Xcode and simply build and run it with cmd+R. Doing so will start a node server which enables live code reloading by packaging and serving the latest JS bundle to the simulator at runtime. From here out you can see your changes by pressing cmd+R in the simulator rather than recompiling in Xcode.</p><p>For this tutorial let’s build a simple version of the Movies app that fetches 25 movies in theater and displays them in a ListView.</p><h3><a class="anchor" name="hello-world"></a>Hello World <a class="hash-link" href="#hello-world">#</a></h3><p><code>react-native init</code> will copy <code>Examples/SampleProject</code> to whatever you named your project, in this case AwesomeProject. This is a simple hello world app. You can edit <code>index.ios.js</code> to make changes to the app and then press cmd+r in the simulator to see your changes.</p><h3><a class="anchor" name="fetching-data"></a>Fetching Data <a class="hash-link" href="#fetching-data">#</a></h3><p>The code below is a slightly modified version of the SampleApp that fetches the data we’ll need to build our application. The data fetching code isn’t really relevant to learning React Native so don’t worry too much about that but the rest of the app is very well documented.</p><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>
|
||
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 comment" spellcheck="true">
|
||
// The fetch module is used to make an HTTP request to rotten tomatoes's API
|
||
</span><span class="token keyword">var</span> fetch <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'fetch'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment" spellcheck="true">
|
||
// This builds REQUEST_URL which is the URL we request data with
|
||
</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> SampleApp <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||
<span class="token comment" spellcheck="true"> // We initialize our state to {movies: null} so that we can check
|
||
</span> <span class="token comment" spellcheck="true"> // this.state.movies === null to determine whether the movies data has been
|
||
</span> <span class="token comment" spellcheck="true"> // loaded or not. Once they have we can do this.setState({movies: data}).
|
||
</span> getInitialState<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">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>
|
||
|
||
<span class="token comment" spellcheck="true"> // componentDidMount is called after the React compnent has loaded, this
|
||
</span> <span class="token comment" spellcheck="true"> // calls this.fetchData to kick off the request for movies data
|
||
</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>
|
||
|
||
<span class="token comment" spellcheck="true"> // Here we're actually making the request and then handling the response by
|
||
</span> <span class="token comment" spellcheck="true"> // doing this.setState({movies: moviesData}). this.setState causes the
|
||
</span> <span class="token comment" spellcheck="true"> // component to re-render. In the render function below, the movies data will
|
||
</span> <span class="token comment" spellcheck="true"> // then be available via this.state.movies.
|
||
</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>
|
||
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>
|
||
|
||
<span class="token comment" spellcheck="true"> // This is pretty simple. If we don't have any movies data then render the
|
||
</span> <span class="token comment" spellcheck="true"> // loading view. Otherwise, render the movies (placeholder for now).
|
||
</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>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">renderLoading<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>
|
||
<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>
|
||
Movies loaded
|
||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
|
||
<span class="token comment" spellcheck="true"> // This is what the loading view looks like, simply some centered Text that
|
||
</span> <span class="token comment" spellcheck="true"> // says "Loading movies...".
|
||
</span> renderLoading<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>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment" spellcheck="true">
|
||
// This is what styles our views. Setting flex to 1 makes a component take up
|
||
</span><span class="token comment" spellcheck="true">// the entire size of its parent. justifyContent and alignItems center the
|
||
</span><span class="token comment" spellcheck="true">// contents vertically and horizontally.
|
||
</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>
|
||
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>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment" spellcheck="true">
|
||
// This line simply tells the ObjC engine that when you supply the entry point
|
||
</span><span class="token comment" spellcheck="true">// "SampleApp", render the component SampleApp (the component in this file)
|
||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'SampleApp'</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> SampleApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>After changing the entire contents of this file to the snippet above you should be able to simply cmd+R in the simulator to see the change. It should render “Loading movies..." until it gets the data back from Rotten Tomatoes at which point it should render “Movies loaded”.</p><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 some of this data in a ListView.</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> |