1<!doctype html><html lang=en dir=ltr class="plugin-pages plugin-id-default" data-has-hydrated=false><head><meta charset=UTF-8><meta name=generator content="Docusaurus v3.10.2"><title data-rh=true>React Native ä¸æç½ Â· 使ç¨Reactæ¥ç¼ååçåºç¨çæ¡æ¶</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"/><meta data-rh=true name=twitter:card content=summary_large_image /><meta data-rh=true name=twitter:image content=https://reactnative.cn/img/logo-og.png /><meta data-rh=true property=og:locale content=en /><meta data-rh=true name=docusaurus_locale content=en /><meta data-rh=true name=docusaurus_tag content=default /><meta data-rh=true name=docsearch:language content=en /><meta data-rh=true name=docsearch:docusaurus_tag content=default /><meta data-rh=true name=description content=使ç¨Reactæ¥ç¼ååçåºç¨çæ¡æ¶ /><meta data-rh=true property=og:title content="React Native"/><meta data-rh=true property=og:description content=使ç¨Reactæ¥ç¼ååçåºç¨çæ¡æ¶ /><meta data-rh=true property=og:url content=https://reactnative.cn /><meta data-rh=true property=og:image content=img/logo-og.png /><link data-rh=true rel=icon href=/img/favicon.ico /><link data-rh=true rel=canonical href=https://reactnative.cn/ /><link data-rh=true rel=alternate href=https://reactnative.cn/ hreflang=en /><link data-rh=true rel=alternate href=https://reactnative.cn/ hreflang=x-default /><link data-rh=true rel=preconnect href=https://GJGDC5L5HP-dsn.algolia.net crossorigin=anonymous />
1<script data-rh=true>document.addEventListener("DOMContentLoaded",function(){void 0===window.docusaurus&&insertBanner()});function insertBanner(){var n=document.createElement("div");n.id="__docusaurus-base-url-issue-banner-container",n.innerHTML='\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/</span> (default value)</p>\n <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n',document.body.prepend(n);var e=document.getElementById("__docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname;e.textContent="/"===s.substr(-1)?s:s+"/"}</script>
1<link rel=preconnect href=https://www.google-analytics.com>
1<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-63485149-4","auto"),ga("send","pageview")</script>
1<script async src=https://www.google-analytics.com/analytics.js></script>
1<link rel=preconnect href=https://www.google-analytics.com><link rel=preconnect href=https://www.googletagmanager.com>
vendor: 63 bytes, line 1
1<script async src="https://www.googletagmanager.com/gtag/js?id=
1UA-63485149-4
vendor: 11 bytes, line 1
1"></script>
1<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-63485149-4",{})</script>
1<link rel=search type=application/opensearchdescription+xml title="React Native 䏿ç½" href=/opensearch.xml>
1<script src=//snack.expo.dev/embed.js defer></script>
1<script src=//cdn.wwads.cn/js/makemoney.js defer></script>
1<link rel=stylesheet href=/assets/css/styles.d15c6292.css />
1<script src=/assets/js/runtime~main.aa98ccf1.js defer></script>
1<script src=/assets/js/main.210ca529.js defer></script>
1</head><body><svg style="display: none;"><defs> 2<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol> 3</defs></svg>
4<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme-714")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss-714")}catch(t){}return!1}())</script>
4<div id=__docusaurus><link rel=preload as=image href=/img/header_logo.svg /><link rel=preload as=image href=img/homepage/phones.png /><link rel=preload as=image href=img/homepage/dissection/0.png /><link rel=preload as=image href=img/homepage/dissection/1.png /><link rel=preload as=image href=img/homepage/dissection/2.png /><link rel=preload as=image href=img/homepage/dissection/3.png /><link rel=preload as=image href=img/homepage/fb-logo.svg /><div role=region aria-label=è·³å°ä¸»è¦å
容><a class=skipToContent_oPtH href=#__docusaurus_skipToContent_fallback>è·³å°ä¸»è¦å
容</a></div><div class="theme-announcement-bar announcementBar_zJRd" role=banner><div class=announcementBarPlaceholder_NpUd></div><div class="content_bSb_ announcementBarContent_t7IR"><a href="https://36k.ai/model-plaza?embedded=1" target=_blank rel="noopener noreferrer">æ é代çç´è¿æå沿ç GPT/Claude/Deepseek/GLM/Kimi çæ¨¡å</a>ï¼ä¼æ ä½è³ä¸æ</div><button type=button aria-label=Close class="clean-btn close closeButton_J5rP announcementBarClose_Jjdj"><svg viewBox="0 0 15 15" width=14 height=14><g stroke=currentColor stroke-width=3.1><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"/></g></svg></button></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/header_logo.svg alt="React Native 䏿ç½" class="themedComponent_siVc themedComponent--light_hHel"/><img src=/img/header_logo.svg alt="React Native 䏿ç½" class="themedComponent_siVc themedComponent--dark_yETr"/></div><b class="navbar__title text--truncate">React Native 䏿ç½</b></a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>å¼åææ¡£</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/getting-started>å
¥é¨æå</a><li><a class=dropdown__link href=/docs/components-and-apis>ç»ä»¶</a><li><a class=dropdown__link href=/docs/accessibilityinfo>API</a><li><a class=dropdown__link href=/architecture/overview>æ¶æ</a></ul></div><a href=//github.com/reactnativecn/react-native-website/issues target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">讨论<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=//pushy.reactnative.cn target=_blank rel="noopener noreferrer" class="navbar__item navbar__link hot-link">çæ´æ°<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a class="navbar__item navbar__link" href=/about>å
³äº</a><a href=//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="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,
41S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Meta+k)" aria-keyshortcuts=Meta+k><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 24 24" aria-hidden=true><circle cx=11 cy=11 r=8 stroke=currentColor fill=none stroke-width=1.4 /><path d="m21 21-4.3-4.3" stroke=currentColor fill=none stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r homepage"><section class="Section HeaderHero dark"><div class=socialLinks><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 /></clipPath><rect x=-25 y=120 width=50 height=25 rx=2 fill=white stroke=none class=stand /><polygon points="-125,90 125,90 160,145 -160,145" fill=white stroke=white stroke-width=5 stroke-linejoin=round class=base /><rect class="screen background" rx=3% width=180 height=300 x=-90 y=-150 stroke=none /><g clip-path=url(#screen) class=logo><g class=logoInner><circle cx=0 cy=0 r=30 fill=#61dafb /><g stroke=#61dafb stroke-width=15 fill=none id=logo><ellipse rx=165 ry=64 /><ellipse rx=165 ry=64 transform=rotate(60) /><ellipse rx=165 ry=64 transform=rotate(120) /></g></g><line x1=-30 x2=30 y1=130 y2=130 stroke=white stroke-width=8 stroke-linecap=round class=speaker /></g><rect class="screen undefined" rx=3% width=180 height=300 x=-90 y=-150 fill=none stroke=white /></svg></div><div class="column last left"><h1 class=title>React Native</h1><p class=tagline>䏿¬¡å¦ä¹ ï¼éå¤ç¼å<div class=buttons><a class="ActionButton primary" href=/docs/getting-started target=_self>å¼å§ä½¿ç¨</a><a class="ActionButton secondary" href=/docs/set-up-your-environment target=_self>æå»ºç¯å¢</a></div></div></div></section><section class="Section NativeApps light"><div class="TwoColumns reverse"><div class="column first right"><h2 class=Heading>ä½¿ç¨ React æ¥å建 Android å iOS çåçåºç¨</h2><div> 5 React Native å°åçå¼åçæä½³é¨åä¸ React ç¸ç»åï¼ 6 è´åäºæä¸ºæå»ºç¨æ·çé¢çé¡¶å° JavaScript æ¡æ¶ã 7<br/><br/> 8<strong>é éæ·»å ï¼å¤å°éæã</strong>éæ¶é½å¯ä»¥æ React Native æ ç¼éæå°ä½ å·²æç Android æ iOS 项ç®ï¼å½ç¶ä¹å¯ä»¥å®å ¨ä»å¤´çç¶ä¸æ°å°éåã 9 </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>JavaScript 卿ï¼åçææ </h2><div> 10å° React åºç¡æ½è±¡ç»ä»¶æ¸²æä¸ºåçå¹³å°UIç»ä»¶ï¼æå³çæ¯ä¸ªè§å¾ååçåºç¨é½å«æ äºè´ã 11<br/><br/> 12<strong>æµæ°´çå¤å¹³å°</strong>ï¼éæç Reactãç»å¤§å¤æ°æ åµä¸ï¼ä½¿ç¨ React Native çå¢éå¯ä»¥å¨å¤ä¸ªå¹³å°é´å ±äº«ä¸ä»½åºç¡ä»£ç
12ï¼ä»¥åéç¨çææ¯ ââ Reactã 13 </div></div><div class="column last right"><div class="language-jsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#24292e;--prism-background-color:#f6f8fa><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-jsx codeBlock_RMoD thin-scrollbar" style=color:#24292e;background-color:#f6f8fa><code class=codeBlockLines_AclH><div class=token-line style=color:#24292e><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#24292e><span class="token plain"></span><span class="token keyword module" style=color:#d73a49>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style=color:#d73a49>from</span><span class="token plain"> </span><span class="token string" style=color:#032f62>'react'</span><span class="token punctuation" style=color:#24292e>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain"></span><span class="token keyword module" style=color:#d73a49>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#24292e>{</span><span class="token imports maybe-class-name">Text</span><span class="token imports punctuation" style=color:#24292e>,</span><span class="token imports"> </span><span class="token imports maybe-class-name">View</span><span class="token imports punctuation" style=color:#24292e>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#d73a49>from</span><span class="token plain"> </span><span class="token string" style=color:#032f62>'react-native'</span><span class="token punctuation" style=color:#24292e>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain"></span><span class="token keyword module" style=color:#d73a49>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#24292e>{</span><span class="token imports maybe-class-name">Header</span><span class="token imports punctuation" style=color:#24292e>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#d73a49>from</span><span class="token plain"> </span><span class="token string" style=color:#032f62>'./Header'</span><span class="token punctuation" style=color:#24292e>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain"></span><span class="token keyword module" style=color:#d73a49>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#24292e>{</span><span class="token imports">heading</span><span class="token imports punctuation" style=color:#24292e>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#d73a49>from</span><span class="token plain"> </span><span class="token string" style=color:#032f62>'./Typography'</span><span class="token punctuation" style=color:#24292e>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#24292e><span class="token plain"></span><span class="token keyword" style=color:#d73a49>const</span><span class="token plain"> </span><span class="token function-variable function maybe-class-name" style=color:#6f42c1>WelcomeScreen</span><span class="token plain"> </span><span class="token operator" style=color:#22863a>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#24292e>(</span><span class="token punctuation" style=color:#24292e>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#22863a>=></span><span class="token plain"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain"> </span><span class="token tag punctuation" style=color:#24292e><</span><span class="token tag class-name" style=color:#6f42c1>View</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e><</span><span class="token tag class-name" style=color:#6f42c1>Header</span><span class="token tag" style=color:#22863a>
13 </span><span class="token tag attr-name" style=color:#d73a49>title</span><span class="token tag attr-value punctuation attr-equals" style=color:#24292e>=</span><span class="token tag attr-value punctuation" style=color:#24292e>"</span><span class="token tag attr-value" style=color:#032f62>Welcome to React Native</span><span class="token tag attr-value punctuation" style=color:#24292e>"</span><span class="token tag punctuation" style=color:#24292e>/></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e><</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag" style=color:#22863a> </span><span class="token tag attr-name" style=color:#d73a49>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#24292e>=</span><span class="token tag script language-javascript punctuation" style=color:#24292e>{</span><span class="token tag script language-javascript" style=color:#22863a>heading</span><span class="token tag script language-javascript punctuation" style=color:#24292e>}</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text">Step One</span><span class="token tag punctuation" style=color:#24292e></</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e><</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> Edit App.js to change this screen and turn it</span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> into your app.</span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e></</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e><</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag" style=color:#22863a> </span><span class="token tag attr-name" style=color:#d73a49>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#24292e>=</span><span class="token tag script language-javascript punctuation" style=color:#24292e>{</span><span class="token tag script language-javascript" style=color:#22863a>heading</span><span class="token tag script language-javascript punctuation" style=color:#24292e>}</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text">See Your Changes</span><span class="token tag punctuation" style=color:#24292e></</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e><</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> Press Cmd + R inside the simulator to reload</span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text">
13 your appâs code.</span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e></</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e><</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag" style=color:#22863a> </span><span class="token tag attr-name" style=color:#d73a49>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#24292e>=</span><span class="token tag script language-javascript punctuation" style=color:#24292e>{</span><span class="token tag script language-javascript" style=color:#22863a>heading</span><span class="token tag script language-javascript punctuation" style=color:#24292e>}</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text">Debug</span><span class="token tag punctuation" style=color:#24292e></</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e><</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> Press Cmd + M or Shake your device to open the</span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> React Native Debug Menu.</span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e></</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e><</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag" style=color:#22863a> </span><span class="token tag attr-name" style=color:#d73a49>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#24292e>=</span><span class="token tag script language-javascript punctuation" style=color:#24292e>{</span><span class="token tag script language-javascript" style=color:#22863a>heading</span><span class="token tag script language-javascript punctuation" style=color:#24292e>}</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text">Learn</span><span class="token tag punctuation" style=color:#24292e></</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e><</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> Read the docs to discover what to do next:</span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e></</span><span class="token tag class-name" style=color:#6f42c1>Text</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#24292e></</span><span class="token tag class-name" style=color:#6f42c1>View</span><span class="token tag punctuation" style=color:#24292e>></span><span class="token plain"></span><br/></div><div class=token-line style=color:#24292e><span class="token plain"> </span><br/></div></code></pre></div></div></div></div></section><section class="Section NativeDevelopment light"><div class="TwoColumns reverse"><div class="column first right"><h2 class=Heading>ç®åæå¼åï¼äººäººæåç»</h2><div> 14React Native ä½¿ä½ å¯ä»¥åå»ºçæ£åççåºç¨ï¼ç¨æ·ä½éªç»ä¸æè¯ã宿ä¾äºä¸äºå¹³å°æ å ³çæ½è±¡æ ¸å¿ç»ä»¶ï¼åæ¯<code>View</code>, <code>Text</code> 以å <code>Image</code>çï¼å¯ç´æ¥æ å°æ¸²æä¸ºå¯¹åºå¹³å°çåç UI ç»ä»¶ã 15 </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>æ ç¼è·¨å¹³å°</h2><div> 16 éè¿ React ç声æå¼ç»ä»¶æºå¶å JavaScript 代ç ï¼ç°æçåç代ç å api å¯ä»¥å®ç¾å°å°è£ åµåå° React ç»ä»¶ä¸ãè¿æ ·æ¢ä¸ºæ´å¤æ°çå¼åå¢éèµäºåçåºç¨çå¼åè½åï¼ä¹è½æå¤§å°æåç°æåçå¢éçå¼åæçã 17 </div></div><div class="column last right"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 498 452"><g fill=none fill-rule=evenodd><rect width=183 height=141 x=48.5 y=123.5 stroke=#979797 stroke-width=3 rx=10 /><path stroke=#999 stroke-width=6 d="m207.75 67.246-.5.865-14 24.25"/><path fill=#999 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"/><path stroke=#999 stroke-width=6 d="m117.428 278.254-.499.864-14 24.25"/><path fill=#999 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"/>
17<path stroke=#999 stroke-width=6 d="m255.25 67.246.5.865 14 24.25"/><path fill=#999 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"/><path stroke=#999 stroke-width=6 d="m164.928 278 .5.865 14 24.25"/><path fill=#999 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"/><g transform=translate(169)><rect width=123 height=52 x=1.5 y=1.5 stroke=#999 stroke-width=3 rx=8 /><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 width=167 height=54 x=1.5 y=0.5 stroke=#4077f7 rx=8 /><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 width=167 height=54 x=0.5 y=0.5 stroke=#0ca40d rx=8 /><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 width=123 height=52 x=1.5 y=1.5 stroke=#999 stroke-width=3 rx=8 /><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 width=123 height=52 x=1.5 y=1.5 stroke=#999 stroke-width=3 rx=8 /><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 width=123 height=52 x=1.5 y=1.5 stroke=#999 stroke-width=3 rx=8 /><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 width=123 height=52 x=1.5 y=1.5 stroke=#999 stroke-width=3 rx=8 /><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 width=123 height=52 x=1.5 y=1.5 stroke=#999 stroke-width=3 rx=8 /><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 width=123 height=52 x=1.5 y=1.5 stroke=#999 stroke-width=3 rx=8 /><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 width=123 height=52 x=1.5 y=1.5 stroke=#999 stroke-width=3 rx=8 /><text fill=#3d3d3d font-family=Helvetica font-size=18><tspan x=45.497 y=33>Text</tspan></text></g><path fill=#999 d="M318.5 186.5v241h6v-241z"/><path stroke=#999 stroke-width=6 d="M323 218.5h29"/><path fill=#999 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"/><path stroke=#999 stroke-width=6 d="M323 356.5h29"/><path fill=#999 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"/><path stroke=#999 stroke-width=6 d="M323 287.5h29"/><path fill=#999 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"/><path stroke=#999 stroke-width=6 d="M323 423.5h29"/><path fill=#999 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"/></g></svg></div></div></section><section class="Section FastRefresh light"><div class="TwoColumns reverse"><div class="column first right"><h2 class=Heading>ç§éå·æ°</h2><div> 18<strong>ä¿åå³å·æ°ã</strong> åå© JavaScript çå¨æç¹æ§ï¼ 19React Native è½å¤è®©ä½ å éè¿ä»£ãä¸è¦åå»çç¼è¯äºï¼æ¹ãåãå·æ°ï¼ 20 </div></div><div class="column last left"><video muted autoplay loop playsinline src=https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@master/cnwebsite/static/img/homepage/ReactRefresh.mp4></video></div></div></section><section class="Section Community light"><div class=content><h2 class=Heading>Facebook æèµï¼ç¤¾åºå桨</h2><div class="TwoColumns "><div class="column first left"><p class=firstP><img src=img/homepage/fb-logo.svg alt="" /><span>Facebook æ©å¨ 2015 年就弿ºäº React Nativeï¼è³ä»ä¸ç´å¨ç§¯æç»´æ¤å使ç¨ã</span>
20<p>å¨ 2018 å¹´, React Native çè´¡ç®è æ°é卿ægithubç项ç®ä¸<!-- --> <a href=https://octoverse.github.com/2018/projects#repositories>æå第äº</a>ãå¦ä»ï¼éå¸ä¸çåå°çå ¬å¸å个人æç»å°ä¸º React Native è´¡ç®ç代ç ï¼å æ¬ä½ä¸éäºï¼ï¼<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> 以å<!-- --> <a href=https://swmansion.com/>Software Mansion</a>çã</div><div class="column last right"><p>ä¼ç§ç社åºå¼åè 们ä¸ç´æºæºä¸æå°è´¡ç®çæ°ç项ç®ï¼å° React Native æå±å°ä¸ä¸ªåä¸ä¸ªæ°çå¹³å°ï¼ä¾å¦ï¼<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> <!-- -->以å<!-- --> <a href=https://github.com/necolas/react-native-web#readme>React Native Web</a>çã</div></div></div></section><section class="Section GetStarted dark"><div class=content><h2 class=Heading>ç°å¨å°±è¯è¯å§ï¼</h2><ol class=steps><li><p>å¨å½ä»¤è¡ä¸è¿è¡<div class=terminal><code>npx react-native init MyTestApp</code></div><li><p>é è¯»ææ¡£</p><a class="ActionButton primary" href=/docs/getting-started target=_self>å¼å§ä½¿ç¨</a><a class="ActionButton secondary" href=/docs/set-up-your-environment target=_self>æå»ºç¯å¢</a></ol></div></section></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class=footer__copyright>React Native ä¸æç½ Â© 2026 æ¦æ±éç½ç½ç»ç§ææéå ¬å¸ 21 <a style=margin-left:10px href=http://beian.miit.gov.cn/>éICPå¤20002031å·-3</a> 22 <img style=width:25px src=//img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png alt="éå ¬ç½å®å¤ 42011202001821å·"> 23 <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011202001821">éå ¬ç½å®å¤ 42011202001821å·</a> 24 </div></div></div></footer></div></body>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.