mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
4ae252a2f0
Deploy website version based on e73a52374fed9f9292d2710686e947aa0a16898c
85 lines
19 KiB
HTML
85 lines
19 KiB
HTML
<!DOCTYPE html><html lang=""><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>React Native · A framework for building native apps using React</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A framework for building native apps using React"/><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="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A framework for building native apps using React"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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','https://www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-41298772-2', 'auto');
|
|
ga('send', 'pageview');
|
|
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/></head><body><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.57</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="pageContainer"><div class="hero"><div class="text">React Native</div><div class="minitext">Build native mobile apps using JavaScript and React</div><div class="buttons-unit"><div><a class="big-button" href="/react-native/docs/getting-started" target="_self">Get Started</a><a class="big-button" href="/react-native/docs/tutorial" target="_self">Learn the Basics</a></div></div></div><div><div class="container"><div class="wrapper"><div class="blockElement"><div class="blockContent"><h2>Build native mobile apps using JavaScript and React</h2><div><span><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 using declarative components.</p>
|
|
</span></div></div><div><span><pre><code class="hljs css language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">class</span> <span class="token class-name">HelloReactNative</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">render</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>
|
|
<span class="token operator"><</span>View<span class="token operator">></span>
|
|
<span class="token operator"><</span>Text<span class="token operator">></span>
|
|
If you like React<span class="token punctuation">,</span> you'll also like React Native<span class="token punctuation">.</span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<span class="token operator"><</span>Text<span class="token operator">></span>
|
|
Instead <span class="token keyword">of</span> <span class="token string">'div'</span> and <span class="token string">'span'</span><span class="token punctuation">,</span> you'll use native components
|
|
like <span class="token string">'View'</span> and <span class="token string">'Text'</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 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>
|
|
</code></pre>
|
|
</span></div></div></div></div><div class="container"><div class="wrapper"><div class="blockElement"><div class="blockContent"><h2>A React Native app is a real mobile app</h2><div><span><p>The apps you are building with React Native aren't mobile web apps because React Native uses the same fundamental UI building blocks as regular iOS and Android apps. Instead of using Swift, Kotlin or Java, you are putting those building blocks together using JavaScript and React.</p>
|
|
</span></div></div><div><span><pre><code class="hljs css language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span>Image<span class="token punctuation">,</span> ScrollView<span class="token punctuation">,</span> Text<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">class</span> <span class="token class-name">ScrollingImageWithText</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">render</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>
|
|
<span class="token operator"><</span>ScrollView<span class="token operator">></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> <span class="token string">'https://facebook.github.io/react-native/img/header_logo.png'</span><span class="token punctuation">}</span><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">66</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">58</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>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 <span class="token keyword">of</span> a native app using the APIs <span class="token keyword">of</span> React<span class="token punctuation">.</span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<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>
|
|
</code></pre>
|
|
</span></div></div></div></div><div class="container"><div class="wrapper"><div class="blockElement"><div class="blockContent"><h2>Don't waste time recompiling</h2><div><div><span><p>React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With <a href="http://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading">Hot Reloading</a>, you can even run new code while retaining your application state. Give it a try - it's a magical experience.</p>
|
|
</span></div></div></div><img src="https://media.giphy.com/media/13WZniThXy0hSE/giphy.gif" alt="Hot Reloading Demonstration"/></div></div></div><div class="container"><div class="wrapper"><div class="blockElement"><div class="blockContent"><h2>Use native code when you need to</h2><div><div><span><p>React Native combines smoothly with components written in Swift, Java, or Objective-C. 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>
|
|
</span></div></div></div><div><span><pre><code class="hljs css language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span>MapViewComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./your-native-map-implementation'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">class</span> <span class="token class-name">CustomMapView</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">render</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>
|
|
<span class="token operator"><</span>View<span class="token operator">></span>
|
|
<span class="token operator"><</span>MapViewComponent <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Text<span class="token operator">></span>
|
|
MapViewComponent could use native Swift<span class="token punctuation">,</span> Java<span class="token punctuation">,</span> or Objective<span class="token operator">-</span><span class="token constant">C</span> <span class="token operator">-</span>
|
|
the product development process is the same<span class="token punctuation">.</span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Text<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>
|
|
</code></pre>
|
|
</span></div></div></div></div></div><div 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, <a href="/react-native/showcase">check out these apps</a>!</p><div class="logos"><div><div class="showcase"><a href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/"><img src="/react-native/img/showcase/facebook.png" 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="/react-native/img/showcase/adsmanager.png" alt="Facebook Ads Manager"/></a></div><div class="showcase"><a><img src="/react-native/img/showcase/fba.png" alt="Facebook Analytics"/></a></div><div class="showcase"><a href="https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7#.3h4wir4zr"><img src="/react-native/img/showcase/instagram.png" alt="Instagram"/></a></div><div class="showcase"><a href="http://makeitopen.com/docs/en/1-1-planning.html"><img src="/react-native/img/showcase/f8.png" alt="F8"/></a></div><div class="showcase"><a href="https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/"><img src="/react-native/img/showcase/bloomberg.png" alt="Bloomberg"/></a></div><div class="showcase"><a href="https://medium.com/@Pinterest_Engineering/supporting-react-native-at-pinterest-f8c2233f90e6"><img src="/react-native/img/showcase/pinterest.png" alt="Pinterest"/></a></div><div class="showcase"><a><img src="/react-native/img/showcase/skype.png" alt="Skype"/></a></div><div class="showcase"><a><img src="/react-native/img/showcase/tesla.png" alt="Tesla"/></a></div><div class="showcase"><a href="https://eng.uber.com/ubereats-react-native/"><img src="/react-native/img/showcase/uber.png" alt="Uber"/></a></div><div class="showcase"><a href=" https://medium.com/walmartlabs/react-native-at-walmartlabs-cdd140589560#.ueonqqloc"><img src="/react-native/img/showcase/walmart.png" alt="Walmart"/></a></div><div class="showcase"><a href="https://www.youtube.com/watch?v=abSNo2P9mMM"><img src="/react-native/img/showcase/wix.png" alt="Wix.com"/></a></div></div></div></div><div class="hero"><div><a class="big-button" href="/react-native/docs/getting-started" target="_self">Get Started</a><a class="big-button" href="/react-native/docs/tutorial" target="_self">Learn the Basics</a></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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><script>
|
|
var search = docsearch({
|
|
|
|
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
|
indexName: 'react-native-versions',
|
|
inputSelector: '#search_input_react',
|
|
algoliaOptions: {"facetFilters":["tags:0.57"],"hitsPerPage":5}
|
|
});
|
|
</script></body></html> |