PageSourceSearch

https://www.react-native.cn/

html react-native.cn collected 2026-09-25 23:46:48 UTC 35,782 bytes, 24 lines download raw bytes

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>&lt;</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>&lt;</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>&lt;</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>&lt;/</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>&lt;</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>&lt;/</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>&lt;</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>&lt;/</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>&lt;</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>&lt;/</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>&lt;</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>&lt;/</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>&lt;</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>&lt;/</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>&lt;</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>&lt;/</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>&lt;</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>&lt;/</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>&lt;/</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.