mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
7df146dcd2
Deploy website version based on 10eb5562b20dfca28492bc4ded130ab7507e3019
91 lines
24 KiB
HTML
91 lines
24 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://reactnative.dev/"/><meta property="og:description" content="A framework for building native apps using React"/><meta property="og:image" content="https://reactnative.dev/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://reactnative.dev/img/logo-og.png"/><link rel="shortcut icon" href="/img/favicon.ico"/><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://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/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://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js"></script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="/js/codeblocks.js"></script><script type="text/javascript" src="/js/tabs.js"></script><script type="text/javascript" src="/js/docs-rating.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
addBackToTop(
|
||
{"zIndex":100}
|
||
)
|
||
});
|
||
</script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/versions"><h3>0.62</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/docs/activityindicator" target="_self">API</a></li><li class=""><a href="/help" target="_self">Community</a></li><li class=""><a href="/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"><main class="HomePage"><script src="/js/dissectionAnimation.js"></script><script src="/js/headerAnimation.js"></script><section class="Section HeaderHero dark"><div class="socialLinks"><a href="https://twitter.com/reactnative?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-count="false">Follow @reactnative</a><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-size="large" aria-label="Star facebook/react-native on GitHub">Star</a></div><div class="TwoColumns reverse"><div class="column first right"><svg class="LogoAnimation init" width="350" height="350" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>React Logo</title><clipPath id="screen"><rect class="screen undefined" rx="3%" width="180" height="300" x="-90" y="-150" fill="none" stroke="gray"></rect></clipPath><rect x="-25" y="120" width="50" height="25" rx="2" fill="white" stroke="none" class="stand"></rect><polygon points="-125,90 125,90 160,145 -160,145" fill="white" stroke="white" stroke-width="5" stroke-linejoin="round" class="base"></polygon><rect class="screen background" rx="3%" width="180" height="300" x="-90" y="-150" stroke="none"></rect><g clip-path="url(#screen)" class="logo"><g class="logoInner"><circle cx="0" cy="0" r="30" fill="#61dafb"></circle><g stroke="#61dafb" stroke-width="15" fill="none" id="logo"><ellipse rx="165" ry="64"></ellipse><ellipse rx="165" ry="64" transform="rotate(60)"></ellipse><ellipse rx="165" ry="64" transform="rotate(120)"></ellipse></g></g><line x1="-30" x2="30" y1="130" y2="130" stroke="white" stroke-width="8" stroke-linecap="round" class="speaker"></line></g><rect class="screen undefined" rx="3%" width="180" height="300" x="-90" y="-150" fill="none" stroke="white"></rect></svg></div><div class="column last left"><h1 class="title">React Native</h1><p class="tagline">Learn once, write anywhere.</p><div class="buttons"><div><a class="ActionButton primary" href="/docs/getting-started" target="_self">Get started</a><a class="ActionButton secondary" href="/docs/tutorial" target="_self">Learn basics</a></div></div></div></div></section><section class="Section NativeApps light"><div class="TwoColumns reverse"><div class="column first right"><h2 class="Heading">Create native apps for Android and iOS using React</h2><div><span><p>React Native combines the best parts of native development with React,
|
||
a best-in-class JavaScript library for building user interfaces.</p>
|
||
<p><strong>Use a little—or a lot</strong>. You can use React Native today in your existing
|
||
Android and iOS projects or you can create a whole new app from scratch.</p>
|
||
</span></div></div><div class="column last left"><img alt="" src="/img/homepage/phones.png"/></div></div></section><section class="Section NativeCode tint"><div class="TwoColumns "><div class="column first left"><h2 class="Heading">Written in JavaScript—rendered with native code</h2><div><span><p>React primitives render to native platform UI, meaning your app uses the
|
||
same native platform APIs other apps do.</p>
|
||
<p><strong>Many platforms</strong>, one React. Create platform-specific versions of components
|
||
so a single codebase can share code across platforms. With React Native,
|
||
one team can maintain two platforms and share a common technology—React.</p>
|
||
</span></div></div><div class="column last right"><div><span><pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <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>Header<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./Header'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span>heading<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./Typography'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">WelcomeScreen</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Header</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Welcome to React Native<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>heading<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Step One</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
Edit App.js to change this screen and turn it
|
||
into your app.
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>heading<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">See Your Changes</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
Press Cmd + R inside the simulator to reload
|
||
your app’s code.
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>heading<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Debug</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
Press Cmd + M or Shake your device to open the
|
||
React Native Debug Menu.
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>heading<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Learn</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
Read the docs to discover what to do next:
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</code></pre>
|
||
</span></div></div></div></section><section class="Section NativeDevelopment light"><div class="TwoColumns reverse"><div class="column first right"><h2 class="Heading">Native Development For Everyone</h2><div><span><p>React Native lets you create truly native apps and doesn't compromise on your users' experience.
|
||
It provides a core set of platform agnostic native components like <code>View</code>, <code>Text</code>, and <code>Image</code>
|
||
that map directly to the platform’s native UI building blocks.</p>
|
||
</span></div></div><div class="column last left"><div class="dissection"><img alt="" src="/img/homepage/dissection/0.png"/><img alt="" src="/img/homepage/dissection/1.png"/><img alt="" src="/img/homepage/dissection/2.png"/><img alt="" src="/img/homepage/dissection/3.png"/></div></div></div></section><section class="Section CrossPlatform tint"><div class="TwoColumns "><div class="column first left"><h2 class="Heading">Seamless Cross-Platform</h2><div><span><p>React components wrap existing native code and interact with native APIs via
|
||
React’s declarative UI paradigm and JavaScript. This enables native app development
|
||
for whole new teams of developers, and can let existing native teams work much faster.</p>
|
||
</span></div></div><div class="column last right"><img alt="" src="/img/homepage/cross-platform.svg"/></div></div></section><section class="Section FastRefresh light"><div class="TwoColumns reverse"><div class="column first right"><h2 class="Heading">Fast Refresh</h2><div><span><p><strong>See your changes as soon as you save.</strong> With the power of JavaScript,
|
||
React Native lets you iterate at lightning speed. No more waiting for native builds to finish.
|
||
Save, see, repeat.</p>
|
||
</span></div></div><div class="column last left"><video muted="" autoplay="" loop="" playsinline="" src="/img/homepage/ReactRefresh.mp4"></video></div></div></section><section class="Section Talks tint"><div class="TwoColumns "><div class="column first left"><h2 class="Heading">Talks</h2><div><span><p>Members of the React Native team frequently speak at various
|
||
conferences.</p>
|
||
<p>You can follow the latest news from the React Native team on
|
||
Twitter</p>
|
||
</span></div><a href="https://twitter.com/reactnative?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-count="false">Follow @reactnative</a></div><div class="column last right"><div class="vidWrapper"><iframe src="https://www.youtube.com/embed/NCAY0HIfrwc" title="Mobile Innovation with React Native, ComponentKit, and Litho" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div></div></div></section><section class="Section Community light"><div class="content"><h2 class="Heading">Facebook Supported, Community Driven</h2><div class="TwoColumns "><div class="column first left"><p class="firstP"><img src="/img/homepage/fb-logo.svg" alt=""/><span>Facebook released React Native in 2015 and has been maintaining it ever since.</span></p><div><span><p>In 2018, React Native had the <a href="https://octoverse.github.com/2018/projects.html#repositories">2nd highest</a> number of contributors for any repository in GitHub.
|
||
Today, React Native is supported by contributions from individuals and companies around the world
|
||
including <a href="https://callstack.com/">Callstack</a>, <a href="https://expo.io/">Expo</a>, <a href="https://infinite.red/">Infinite Red</a>, <a href="https://www.microsoft.com/en-gb/">Microsoft</a>, and <a href="https://swmansion.com/">Software Mansion</a>.</p>
|
||
<p>Our community is always shipping exciting new projects and exploring platforms beyond Android and iOS
|
||
with repos like React Native Windows and React Native Web.</p>
|
||
</span></div></div><div class="column last right"><p>React Native is being used in thousands of apps, but it's likely you've already used it in one of these apps:</p><ul class="AppList"><li class="item"><a href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/"><img src="/img/showcase/facebook.png" alt="Facebook"/></a></li><li class="item"><a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/"><img src="/img/showcase/adsmanager.png" alt="Facebook Ads Manager"/></a></li><li class="item"><a href="https://analytics.facebook.com/blog"><img src="/img/showcase/fba.png" alt="Facebook Analytics"/></a></li><li class="item"><a href="https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7#.3h4wir4zr"><img src="/img/showcase/instagram.png" alt="Instagram"/></a></li><li class="item"><a href=""><img src="/img/showcase/oculus.png" alt="Oculus"/></a></li><li class="item"><a href="https://dev.skype.com/react"><img src="/img/showcase/skype.png" alt="Skype"/></a></li><li class="item"><a href="https://blog.discord.com/how-discord-achieves-native-ios-performance-with-react-native-390c84dcd502"><img src="/img/showcase/discord.png" alt="Discord"/></a></li><li class="item"><a href="https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/"><img src="/img/showcase/bloomberg.png" alt="Bloomberg"/></a></li><li class="item"><a href="https://medium.com/@Pinterest_Engineering/supporting-react-native-at-pinterest-f8c2233f90e6"><img src="/img/showcase/pinterest.png" alt="Pinterest"/></a></li><li class="item"><a href="https://www.tesla.com/blog"><img src="/img/showcase/tesla.png" alt="Tesla"/></a></li><li class="item"><a href="https://eng.uber.com/ubereats-react-native/"><img src="/img/showcase/ubereats.png" alt="Uber Eats"/></a></li><li class="item"><a href=" https://medium.com/walmartlabs/react-native-at-walmartlabs-cdd140589560#.ueonqqloc"><img src="/img/showcase/walmart.png" alt="Walmart"/></a></li><li class="item"><a href="https://www.wix.com/wix-lp/wix-app"><img src="/img/showcase/wix.png" alt="Wix.com"/></a></li><li class="item"><a href="https://www.salesforce.com/products/einstein/einstein-voice/"><img src="/img/showcase/salesforce.png" alt="Salesforce"/></a></li><li class="item"><a href="https://artsy.github.io/series/react-native-at-artsy/"><img src="https://raw.githubusercontent.com/artsy/eigen/master/Artsy/Resources/Images.xcassets/AppIcon.appiconset/AppIcon167.png" alt="Artsy"/></a></li><li class="item"><a href="https://www.tencent.com/en-us/system.html"><img src="/img/showcase/qq.png" alt="Tencent QQ"/></a></li></ul><p>and <a href="/showcase">many more</a>.</p></div></div></div></section><section class="Section GetStarted dark"><div class="content"><h2 class="Heading">Give it a try</h2><ol class="steps"><li><p>Run this</p><div class="terminal"><code>npx react-native init MyTestApp</code></div></li><li><p>Read these</p><div><a class="ActionButton primary" href="/docs/getting-started" target="_self">Get started</a><a class="ActionButton secondary" href="/docs/tutorial" target="_self">Learn basics</a></div></li></ol></div></section></main><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/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="https://reactjs.org" target="_blank">React</a></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 © 2020 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>
|
||
document.addEventListener('keyup', function(e) {
|
||
if (e.target !== document.body) {
|
||
return;
|
||
}
|
||
// keyCode for '/' (slash)
|
||
if (e.keyCode === 191) {
|
||
const search = document.getElementById('search_input_react');
|
||
search && search.focus();
|
||
}
|
||
});
|
||
</script><script>
|
||
var search = docsearch({
|
||
|
||
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
||
indexName: 'react-native-versions',
|
||
inputSelector: '#search_input_react',
|
||
algoliaOptions: {"facetFilters":["tags:0.62"],"hitsPerPage":5}
|
||
});
|
||
</script></body></html> |