mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
86 lines
44 KiB
HTML
86 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.66">
|
||
<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">
|
||
<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="twitter:image" content="https://reactnative.dev/img/logo-og.png"><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" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><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"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||
<link rel="stylesheet" href="/main.ca40cabd.css">
|
||
<link rel="preload" href="/styles.07d522c6.js" as="script">
|
||
<link rel="preload" href="/runtime~main.2348d2f9.js" as="script">
|
||
<link rel="preload" href="/main.5e05a427.js" as="script">
|
||
<link rel="preload" href="/1.ba9ce8bd.js" as="script">
|
||
<link rel="preload" href="/2.58cb5d3d.js" as="script">
|
||
<link rel="preload" href="/945.d418d70e.js" as="script">
|
||
<link rel="preload" href="/01a85c17.fc3def5a.js" as="script">
|
||
<link rel="preload" href="/1be78505.a83719b3.js" as="script">
|
||
<link rel="preload" href="/52cb2878.43f3ca77.js" as="script">
|
||
<link rel="preload" href="/5fc994c2.e33f3447.js" as="script">
|
||
<link rel="preload" href="/6875c492.4aeeea1a.js" as="script">
|
||
<link rel="preload" href="/a6aa9e1f.0ce82f55.js" as="script">
|
||
<link rel="preload" href="/c4f5d8e4.08589e8d.js" as="script">
|
||
<link rel="preload" href="/ccc49370.82a72ad9.js" as="script">
|
||
<link rel="preload" href="/946.361bddca.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">
|
||
<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 xmlns="http://www.w3.org/2000/svg" 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 class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><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.63</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.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_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</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"><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 class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</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 class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><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.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_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" 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" 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 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">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></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><g transform="matrix(-.5 .8660254 -.8660254 -.5 214.678203 71.246479)"><path d="m0 8h.99824564 28.00175436" stroke="#999" stroke-width="6"></path><path d="m40.2835353 9.07989948c.9324575-.59631093.9356445-1.56108391 0-2.1594329l-9.914219-6.34018907c-1.860822-1.19000432-3.3693163-.37037918-3.3693163 1.83629677v11.16721752c0 2.204163 1.5041128 3.0291031 3.3693163 1.8362967z" fill="#999"></path></g><g transform="matrix(-.5 .8660254 -.8660254 -.5 124.356406 282.253521)"><path d="m0 8h.99824564 28.00175436" stroke="#999" stroke-width="6"></path><path d="m40.2835353 9.07989948c.9324575-.59631093.9356445-1.56108391 0-2.1594329l-9.914219-6.34018907c-1.860822-1.19000432-3.3693163-.37037918-3.3693163 1.83629677v11.16721752c0 2.204163 1.5041128 3.0291031 3.3693163 1.8362967z" fill="#999"></path></g><g transform="matrix(.5 .8660254 .8660254 -.5 248.321797 71.246479)"><path d="m0 8h.99824564 28.00175436" stroke="#999" stroke-width="6"></path><path d="m40.2835353 9.07989948c.9324575-.59631093.9356445-1.56108391 0-2.1594329l-9.914219-6.34018907c-1.860822-1.19000432-3.3693163-.37037918-3.3693163 1.83629677v11.16721752c0 2.204163 1.5041128 3.0291031 3.3693163 1.8362967z" fill="#999"></path></g><g transform="matrix(.5 .8660254 .8660254 -.5 158 282)"><path d="m0 8h.99824564 28.00175436" stroke="#999" stroke-width="6"></path><path d="m40.2835353 9.07989948c.9324575-.59631093.9356445-1.56108391 0-2.1594329l-9.914219-6.34018907c-1.860822-1.19000432-3.3693163-.37037918-3.3693163 1.83629677v11.16721752c0 2.204163 1.5041128 3.0291031 3.3693163 1.8362967z" fill="#999"></path></g><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.486328" 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.476563" 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.458008" 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.986328" 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.986328" 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.496582" 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.496582" 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.496582" 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.496582" 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.496582" y="33">Text</tspan></text></g><path d="m201 304h241v6h-241z" fill="#999" transform="matrix(0 1 1 0 14.5 -14.5)"></path><g transform="matrix(1 0 0 -1 323 227)"><path d="m0 8.5h1.49809915 27.50190085" stroke="#999" stroke-width="6"></path><path d="m40.2835353 9.57993401c.9324575-.59631093.9356445-1.56108391 0-2.15943291l-9.914219-6.34018906c-1.860822-1.19000433-3.3693163-.37037919-3.3693163 1.83629677v11.16721749c0 2.204163 1.5041128 3.0291031 3.3693163 1.8362968z" fill="#999"></path></g><g transform="matrix(1 0 0 -1 323 365)"><path d="m0 8.5h1.49809915 27.50190085" stroke="#999" stroke-width="6"></path><path d="m40.2835353 9.57993401c.9324575-.59631093.9356445-1.56108391 0-2.15943291l-9.914219-6.34018906c-1.860822-1.19000433-3.3693163-.37037919-3.3693163 1.83629677v11.16721749c0 2.204163 1.5041128 3.0291031 3.3693163 1.8362968z" fill="#999"></path></g><g transform="matrix(1 0 0 -1 323 296)"><path d="m0 8.5h1.49809915 27.50190085" stroke="#999" stroke-width="6"></path><path d="m40.2835353 9.57993401c.9324575-.59631093.9356445-1.56108391 0-2.15943291l-9.914219-6.34018906c-1.860822-1.19000433-3.3693163-.37037919-3.3693163 1.83629677v11.16721749c0 2.204163 1.5041128 3.0291031 3.3693163 1.8362968z" fill="#999"></path></g><g transform="matrix(1 0 0 -1 323 432)"><path d="m0 8.5h1.49809915 27.50190085" stroke="#999" stroke-width="6"></path><path d="m40.2835353 9.57993401c.9324575-.59631093.9356445-1.56108391 0-2.15943291l-9.914219-6.34018906c-1.860822-1.19000433-3.3693163-.37037919-3.3693163 1.83629677v11.16721749c0 2.204163 1.5041128 3.0291031 3.3693163 1.8362968z" 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/onboarding-thousands-of-users-with-react-native-361219066df4"><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/"><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="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_19Ac"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div>Copyright © 2021 Facebook, Inc.</div></div></div></footer></div>
|
||
<script src="/styles.07d522c6.js"></script>
|
||
<script src="/runtime~main.2348d2f9.js"></script>
|
||
<script src="/main.5e05a427.js"></script>
|
||
<script src="/1.ba9ce8bd.js"></script>
|
||
<script src="/2.58cb5d3d.js"></script>
|
||
<script src="/945.d418d70e.js"></script>
|
||
<script src="/01a85c17.fc3def5a.js"></script>
|
||
<script src="/1be78505.a83719b3.js"></script>
|
||
<script src="/52cb2878.43f3ca77.js"></script>
|
||
<script src="/5fc994c2.e33f3447.js"></script>
|
||
<script src="/6875c492.4aeeea1a.js"></script>
|
||
<script src="/a6aa9e1f.0ce82f55.js"></script>
|
||
<script src="/c4f5d8e4.08589e8d.js"></script>
|
||
<script src="/ccc49370.82a72ad9.js"></script>
|
||
<script src="/946.361bddca.js"></script>
|
||
</body>
|
||
</html> |