mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
97 lines
44 KiB
HTML
97 lines
44 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="generator" content="Docusaurus v2.0.0-alpha.70">
|
||
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom Feed">
|
||
<link rel="preconnect" href="https://www.google-analytics.com">
|
||
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script>
|
||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||
<link rel="preconnect" href="https://www.google-analytics.com">
|
||
<link rel="preconnect" href="https://www.googletagmanager.com">
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41298772-2"></script>
|
||
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
|
||
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
|
||
<link rel="icon" href="/img/pwa/manifest-icon-512.png">
|
||
<link rel="manifest" href="/manifest.json">
|
||
<meta name="theme-color" content="#20232a">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="#20232a">
|
||
<link rel="apple-touch-icon" href="/img/pwa/manifest-icon-512.png">
|
||
<link rel="mask-icon" href="/img/pwa/manifest-icon-512.png" color="#06bcee">
|
||
<meta name="msapplication-TileImage" href="/img/pwa/manifest-icon-512.png">
|
||
<meta name="msapplication-TileColor" content="#20232a">
|
||
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js" defer="defer"></script>
|
||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native · A framework for building native apps using React</title><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><script data-react-helmet="true">document.addEventListener("DOMContentLoaded",(function(){var n=document.getElementById("base-url-issue-banner-container");if(n){var e=window.location.pathname,t="/"===e.substr(-1)?e:e+"/";n.innerHTML=t}}))</script><link rel="stylesheet" href="/styles.f56da522.css">
|
||
<link rel="stylesheet" href="/main.3de2b5ef.css">
|
||
<link rel="preload" href="/styles.9d29dd5a.js" as="script">
|
||
<link rel="preload" href="/runtime~main.b00a5634.js" as="script">
|
||
<link rel="preload" href="/main.4103a08e.js" as="script">
|
||
<link rel="preload" href="/1.7a6193e2.js" as="script">
|
||
<link rel="preload" href="/2.9b40dc51.js" as="script">
|
||
<link rel="preload" href="/1091.f1d59490.js" as="script">
|
||
<link rel="preload" href="/01a85c17.ba6e50e3.js" as="script">
|
||
<link rel="preload" href="/18b93cb3.0f191383.js" as="script">
|
||
<link rel="preload" href="/1be78505.c251d713.js" as="script">
|
||
<link rel="preload" href="/1f391b9e.08b65592.js" as="script">
|
||
<link rel="preload" href="/5fc994c2.1a243557.js" as="script">
|
||
<link rel="preload" href="/6875c492.c3f7c047.js" as="script">
|
||
<link rel="preload" href="/a6aa9e1f.d957d979.js" as="script">
|
||
<link rel="preload" href="/c4f5d8e4.03c60be1.js" as="script">
|
||
<link rel="preload" href="/ccc49370.337c1f21.js" as="script">
|
||
<link rel="preload" href="/1093.b6be3a0d.js" as="script">
|
||
</head>
|
||
<body>
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||
<div class="baseUrlIssueBanner_1GEB" style="border:solid red thick;background-color:#ffe6b3;margin:20px;padding:20px;font-size:20px"><p style="font-weight:bold;font-size:30px">Your Docusaurus site did not load properly.</p><p>A very common reason is a wrong site <a href="https://v2.docusaurus.io/docs/docusaurus.config.js/#baseurl" style="font-weight:bold">baseUrl configuration</a>.</p><p>Current configured baseUrl = <span style="font-weight:bold;color:red">/</span> (default value)</p><p>We suggest trying baseUrl = <span style="font-weight:bold;color:green" id="base-url-issue-banner-container"></span> </p></div><nav aria-label="Skip navigation links"><button type="button" tabindex="0" class="skipToContent_3aLp">Skip to main content</button></nav><nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg aria-label="Menu" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--light_VJaY navbar__logo"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--dark_1NF3 navbar__logo"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.64</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.64</a></li><li><a class="dropdown__link" href="/docs/0.63/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_Bh6k"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_1UDy">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_1UDy">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--light_VJaY navbar__logo"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--dark_1NF3 navbar__logo"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.64</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.63/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper homepage"><section class="Section HeaderHero dark"><div class="socialLinks"><a href="https://twitter.com/intent/follow?screen_name=reactnative&region=follow_link" class="twitter-follow-button"><div class="icon"></div>Follow @reactnative</a><div class="github-button"><span><a href="https://github.com/facebook/react-native" data-icon="octicon-star" data-size="large" aria-label="Star facebook/react-native on GitHub">Star</a></span></div></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"><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></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>
|
||
React Native combines the best parts of native development with React,
|
||
a best-in-class JavaScript library for building user interfaces.
|
||
<br><br>
|
||
<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.
|
||
</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>
|
||
React primitives render to native platform UI, meaning your app uses the
|
||
same native platform APIs other apps do.
|
||
<br><br>
|
||
<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.
|
||
</div></div><div class="column last right"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> React </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">Text</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> View</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react-native'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">Header</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'./Header'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">heading</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'./Typography'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">WelcomeScreen</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Header</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">title</span><span class="token tag attr-value punctuation attr-equals" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">Welcome to React Native</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag punctuation" style="color:#657b83">/></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">heading</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">Step One</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> Edit App</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">js to change </span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token plain"> screen and turn it</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> into your app</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">heading</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">See Your Changes</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> Press Cmd </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">R</span><span class="token plain"> inside the simulator to reload</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> your app’s code</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">heading</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">Debug</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> Press Cmd </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">M</span><span class="token plain"> or Shake your device to open the</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> React Native Debug Menu</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">heading</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">Learn</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> Read the docs to discover what to </span><span class="token keyword" style="color:#c5a5c5">do</span><span class="token plain"> next</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></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>
|
||
React Native lets you create truly native apps and doesn't compromise your users' experiences.
|
||
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.
|
||
</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>
|
||
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.
|
||
</div></div><div class="column last right"><svg viewBox="0 0 498 452" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect height="141" rx="10" stroke="#979797" stroke-width="3" width="183" x="48.5" y="123.5"></rect><path d="M207.75 67.246l-.5.865-14 24.25" stroke="#999" stroke-width="6"></path><path d="M186.673 101.593c.05 1.106.884 1.59 1.87 1.08l10.448-5.416c1.961-1.017 2.005-2.733.094-3.836l-9.67-5.584c-1.91-1.102-3.376-.212-3.276 2z" fill="#999"></path><path d="M117.428 278.254l-.499.864-14 24.25" stroke="#999" stroke-width="6"></path><path d="M96.351 312.6c.05 1.106.884 1.591 1.87 1.08l10.448-5.416c1.961-1.017 2.006-2.733.095-3.836l-9.672-5.584c-1.908-1.102-3.375-.212-3.274 2z" fill="#999"></path><path d="M255.25 67.246l.5.865 14 24.25" stroke="#999" stroke-width="6"></path><path d="M276.327 101.593c-.05 1.106-.884 1.59-1.87 1.08l-10.448-5.416c-1.961-1.017-2.005-2.733-.094-3.836l9.67-5.584c1.91-1.102 3.376-.212 3.276 2z" fill="#999"></path><path d="M164.928 278l.5.865 14 24.25" stroke="#999" stroke-width="6"></path><path d="M186.005 312.347c-.05 1.105-.884 1.59-1.87 1.08l-10.448-5.417c-1.96-1.016-2.005-2.732-.094-3.836l9.67-5.583c1.91-1.102 3.376-.212 3.276 2z" fill="#999"></path><g transform="translate(169)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="33.486" y="33">App.js</tspan></text></g><g transform="translate(56 198)"><rect height="54" rx="8" stroke="#4077f7" width="167" x="1.5" y="0.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="27.477" y="33">Header.ios.js</tspan></text></g><g transform="translate(56 134)"><rect height="54" rx="8" stroke="#0ca40d" width="167" x="0.5" y="0.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="8.458" y="33">Header.android.js</tspan></text></g><g transform="translate(258 122)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="28.986" y="33">Body.js</tspan></text></g><g transform="translate(0 325)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="37.986" y="33">Image</tspan></text></g><g transform="translate(151 325)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 191)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 260)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 329)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 397)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="45.497" y="33">Text</tspan></text></g><path d="M318.5 186.5v241h6v-241z" fill="#999"></path><g><path d="M323 218.5h29" stroke="#999" stroke-width="6"></path><path d="M363.284 217.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836z" fill="#999"></path></g><g><path d="M323 356.5h29" stroke="#999" stroke-width="6"></path><path d="M363.284 355.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836z" fill="#999"></path></g><g><path d="M323 287.5h29" stroke="#999" stroke-width="6"></path><path d="M363.284 286.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836z" fill="#999"></path></g><g><path d="M323 423.5h29" stroke="#999" stroke-width="6"></path><path d="M363.284 422.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836z" fill="#999"></path></g></g></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>
|
||
<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.
|
||
</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>
|
||
Members of the React Native team frequently speak at various conferences.
|
||
<br><br>
|
||
You can follow the latest news from the React Native team on Twitter
|
||
</div><a href="https://twitter.com/intent/follow?screen_name=reactnative&region=follow_link" class="twitter-follow-button"><div class="icon"></div>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><p>In 2018, React Native had the <a href="https://octoverse.github.com/2018/projects#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 <span><a href="https://callstack.com/">Callstack</a></span>, <span><a href="https://expo.io/">Expo</a></span>, <a href="https://infinite.red/">Infinite Red</a>, <a href="https://www.microsoft.com/">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 <span><a href="https://github.com/microsoft/react-native-windows#readme">React Native Windows</a></span>, <a href="https://github.com/microsoft/react-native-macos#readme">React Native macOS</a> and <a href="https://github.com/necolas/react-native-web#readme">React Native Web</a>.</p></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"><img src="/img/showcase/oculus.png" alt="Oculus"></li><li class="item"><a href="https://blog.coinbase.com/optimizing-react-native-7e7bf7ac3a34"><img src="/img/showcase/coinbase.png" alt="Coinbase"></a></li><li class="item"><a href="https://engineering.shopify.com/blogs/engineering/react-native-future-mobile-shopify"><img src="/img/showcase/shopify.png" alt="Shopify"></a></li><li class="item"><a href="https://engineering.tableau.com/react-native-at-tableau-3-years-in-89d43c38354c"><img src="/img/showcase/tableau.png" alt="Tableau"></a></li><li class="item"><a href="https://tech.flipkart.com/the-journey-of-react-native-flipkart-47dcd0c3d1c6"><img src="/img/showcase/flipkart.png" alt="FlipKart"></a></li><li class="item"><img src="/img/showcase/mercari.png" alt="Mercari"></li><li class="item"><a href="https://www.nerdwallet.com/blog/engineering/beyond-the-browser-how-nerdwallet-went-native/"><img src="/img/showcase/nerdwallet.png" alt="NerdWallet"></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://dev.skype.com/react"><img src="/img/showcase/skype.png" alt="Skype"></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://medium.com/wix-engineering/react-native-at-wix-the-architecture-db6361764da6"><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://medium.com/zynga-engineering/why-how-words-with-friends-is-adopting-react-native-b24a405f421c"><img src="/img/showcase/words2.png" alt="Words with Friends"></a></li><li class="item"><a href="https://www.callofduty.com/app"><img src="/img/showcase/callofduty_companion.png" alt="Call of Duty Companion App"></a></li><li class="item"><a href="https://corporate.foreca.com/en/news/how-to-make-a-global-weather-app-serving-both-ios-and-android-users"><img src="/img/showcase/foreca.png" alt="Foreca"></a></li><li class="item"><a href="https://medium.com/@and.global/providing-financial-access-to-the-underbanked-through-react-native-a8473691d06"><img src="/img/showcase/lendmn.png" alt="LendMN"></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><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></li></ol></div></section></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who's using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_3cAK"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div class="footer__copyright">Copyright © 2021 Facebook, Inc.</div></div></div></footer></div>
|
||
<script src="/styles.9d29dd5a.js"></script>
|
||
<script src="/runtime~main.b00a5634.js"></script>
|
||
<script src="/main.4103a08e.js"></script>
|
||
<script src="/1.7a6193e2.js"></script>
|
||
<script src="/2.9b40dc51.js"></script>
|
||
<script src="/1091.f1d59490.js"></script>
|
||
<script src="/01a85c17.ba6e50e3.js"></script>
|
||
<script src="/18b93cb3.0f191383.js"></script>
|
||
<script src="/1be78505.c251d713.js"></script>
|
||
<script src="/1f391b9e.08b65592.js"></script>
|
||
<script src="/5fc994c2.1a243557.js"></script>
|
||
<script src="/6875c492.c3f7c047.js"></script>
|
||
<script src="/a6aa9e1f.d957d979.js"></script>
|
||
<script src="/c4f5d8e4.03c60be1.js"></script>
|
||
<script src="/ccc49370.337c1f21.js"></script>
|
||
<script src="/1093.b6be3a0d.js"></script>
|
||
</body>
|
||
</html> |