mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
73 lines
20 KiB
HTML
73 lines
20 KiB
HTML
<!DOCTYPE html><html><head><title>React Native | A framework for building native apps using React</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="React Native | A framework for building native apps using React"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.45</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><div class="hero"><div class="wrap"><div class="text">React Native</div><div class="minitext">Learn once, write anywhere: Build mobile apps with React</div></div><div class="buttons-unit"><a href="docs/getting-started.html" class="button">Get Started</a><a href="docs/tutorial.html" class="button">Take the Tutorial</a></div></div><section class="content wrap"><div style="margin:40px auto;max-width:800px;"><h2>Build native mobile apps using JavaScript and React</h2><p>React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.</p><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
import <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
|
|
|
class <span class="token class-name">WhyReactNativeIsSoGreat</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<View<span class="token operator">></span>
|
|
<Text<span class="token operator">></span>
|
|
If you like React on the web<span class="token punctuation">,</span> you'll like React Native<span class="token punctuation">.</span>
|
|
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<Text<span class="token operator">></span>
|
|
You just use native components like <span class="token string">'View'</span> and <span class="token string">'Text'</span><span class="token punctuation">,</span>
|
|
instead of web components like <span class="token string">'div'</span> and <span class="token string">'span'</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></div><h2>A React Native app is a real mobile app</h2><p>With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.</p><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
import <span class="token punctuation">{</span> Image<span class="token punctuation">,</span> ScrollView<span class="token punctuation">,</span> Text <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
|
|
|
class <span class="token class-name">AwkwardScrollingImageWithText</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<ScrollView<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> <span class="token string">'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'</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>
|
|
On iOS<span class="token punctuation">,</span> a React Native ScrollView uses a native UIScrollView<span class="token punctuation">.</span>
|
|
On Android<span class="token punctuation">,</span> it uses a native ScrollView<span class="token punctuation">.</span>
|
|
|
|
On iOS<span class="token punctuation">,</span> a React Native Image uses a native UIImageView<span class="token punctuation">.</span>
|
|
On Android<span class="token punctuation">,</span> it uses a native ImageView<span class="token punctuation">.</span>
|
|
|
|
React Native wraps the fundamental native components<span class="token punctuation">,</span> giving you
|
|
the performance of a native app<span class="token punctuation">,</span> plus the clean design of React<span class="token punctuation">.</span>
|
|
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<<span class="token operator">/</span>ScrollView<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span></div><h2>Don't waste time recompiling</h2><p>React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience.</p><br><img src="https://media.giphy.com/media/13WZniThXy0hSE/giphy.gif"><h2>Use native code when you need to</h2><p>React Native combines smoothly with components written in Objective-C, Java, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.</p><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
import <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
|
import <span class="token punctuation">{</span> TheGreatestComponentInTheWorld <span class="token punctuation">}</span> from <span class="token string">'./your-native-code'</span><span class="token punctuation">;</span>
|
|
|
|
class <span class="token class-name">SomethingFast</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<View<span class="token operator">></span>
|
|
<TheGreatestComponentInTheWorld <span class="token operator">/</span><span class="token operator">></span>
|
|
<Text<span class="token operator">></span>
|
|
TheGreatestComponentInTheWorld could use native Objective<span class="token operator">-</span>C<span class="token punctuation">,</span>
|
|
Java<span class="token punctuation">,</span> or Swift <span class="token operator">-</span> the product development process is the same<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></div></div><section class="home-get-started-section"><div class="buttons-unit"><a href="docs/getting-started.html#content" class="button">Get Started with React Native</a></div></section><section class="home-showcase-section"><h2>Who's using React Native?</h2><p>Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be accomplished with React Native, check out these apps!</p><div><div class="showcase"><a href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/"><img src="https://lh3.googleusercontent.com/ZZPdzvlpK9r_Df9C3M7j1rNRi7hhHRvPhlklJ3lfi5jk86Jd1s0Y5wcQ1QgbVaAP5Q=w300" alt="Facebook"></a></div><div class="showcase"><a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/"><img src="http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/9e/16/86/9e1686ef-cc55-805a-c977-538ddb5e6832/mzl.gqbhwitj.png" alt="Facebook Ads Manager"></a></div><div class="showcase"><a href="https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7#.3h4wir4zr"><img src="http://a4.mzstatic.com/us/r30/Purple62/v4/1f/8d/f9/1f8df910-8ec7-3b8e-0104-d44e869f4d65/icon175x175.jpeg" alt="Instagram"></a></div><div class="showcase"><a href="http://makeitopen.com/tutorials/building-the-f8-app/planning/"><img src="http://is2.mzstatic.com/image/thumb/Purple122/v4/86/ed/10/86ed1086-1e89-ff43-06b2-9cfb9641d79f/source/175x175bb.jpg" alt="F8"></a></div><div class="showcase"><a href="https://www.youtube.com/watch?v=tUfgQtmG3R0"><img src="https://a2.muscache.com/airbnb/static/icons/apple-touch-icon-180x180-bcbe0e3960cd084eb8eaf1353cf3c730.png" alt="Airbnb"></a></div><div class="showcase"><a href=" https://medium.com/walmartlabs/react-native-at-walmartlabs-cdd140589560#.ueonqqloc"><img src="http://is2.mzstatic.com/image/thumb/Purple111/v4/64/9f/20/649f2026-e968-0417-660c-e5ee6d7977ff/source/350x350bb.jpg" alt="Walmart"></a></div><div class="showcase"><a><img src="http://is2.mzstatic.com/image/thumb/Purple122/v4/d2/36/28/d23628e5-c9bf-d0fb-104f-61fa52976ff5/source/175x175bb.jpg" alt="Tesla"></a></div><div class="showcase"><a href="https://www.tencent.com/en-us/system.html"><img src="http://pp.myapp.com/ma_icon/0/icon_6633_1461768893/96" alt="Tencent QQ"></a></div><div class="showcase"><a href="http://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K"><img src="http://a3.mzstatic.com/us/r30/Purple62/v4/90/7c/9b/907c9b4e-556d-1a45-45d4-0ea801719abd/icon175x175.png" alt="Baidu Mobile (手机百度)"></a></div><div class="showcase"><a href="https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/"><img src="http://is1.mzstatic.com/image/thumb/Purple71/v4/31/24/72/312472df-3d53-0acf-fc31-8a25682e528f/source/175x175bb.jpg" alt="Bloomberg"></a></div><div class="showcase"><a href="http://www.vogue.com/app"><img src="http://a2.mzstatic.com/us/r30/Purple30/v4/06/24/92/0624927f-a389-746c-27f9-e2466d59e55b/icon175x175.jpeg" alt="Vogue"></a></div><div class="showcase"><a href="https://www.youtube.com/watch?v=cI9bDvDEsYE"><img src="https://lh3.googleusercontent.com/tXt0HgJ7dCgOnuQ-lQr1P7E57mnOYfwXhRsV9lGcPwHPVvrDAN6YmpLVFgy88qKrkFI=w300" alt="li.st"></a></div><div class="showcase"><a href="https://discord.engineering/react-native-deep-dive-91fd5e949933#.5jnqftgof"><img src="http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg" alt="Discord"></a></div><div class="showcase"><a href="https://blog.gyrosco.pe/building-the-app-1dac1a97d253"><img src="https://media.gyrosco.pe/images/magneto/180x180.png" alt="Gyroscope"></a></div><div class="showcase"><a href="https://hackernoon.com/townske-app-in-react-native-6ad557de7a7c"><img src="http://a3.mzstatic.com/us/r30/Purple69/v4/8b/42/20/8b4220af-5165-91fd-0f05-014332df73ef/icon175x175.png" alt="Townske"></a></div></div><p class="footnote">Some of these are hybrid native/React Native apps.</p><div class="buttons-unit"><a href="/react-native/showcase.html" class="button">More React Native apps</a></div></section></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(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");
|
|
|
|
docsearch({
|
|
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
|
indexName: 'react-native-versions',
|
|
inputSelector: '#algolia-doc-search',
|
|
algoliaOptions: { facetFilters: [ "tags:0.45" ], hitsPerPage: 5 }
|
|
});
|
|
</script><script src="js/scripts.js"></script><script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script></body></html> |