diff --git a/404.html b/404.html index 1162a79f43f..2b4bb19fd3c 100644 --- a/404.html +++ b/404.html @@ -17,7 +17,7 @@ - +
diff --git a/about.html b/about.html index 99ec5eeb3d3..a171ca5341c 100644 --- a/about.html +++ b/about.html @@ -17,7 +17,7 @@ - + diff --git a/architecture/bundled-hermes.html b/architecture/bundled-hermes.html index ec05bfafe49..c38cf50e0c1 100644 --- a/architecture/bundled-hermes.html +++ b/architecture/bundled-hermes.html @@ -17,7 +17,7 @@ - + diff --git a/architecture/fabric-renderer.html b/architecture/fabric-renderer.html index 20b0f373d54..558c586ea33 100644 --- a/architecture/fabric-renderer.html +++ b/architecture/fabric-renderer.html @@ -17,7 +17,7 @@ - + diff --git a/architecture/glossary.html b/architecture/glossary.html index 559b26488d1..eabb353f0e6 100644 --- a/architecture/glossary.html +++ b/architecture/glossary.html @@ -17,7 +17,7 @@ - + diff --git a/architecture/overview.html b/architecture/overview.html index caf986eeabd..f75303cd6f1 100644 --- a/architecture/overview.html +++ b/architecture/overview.html @@ -17,7 +17,7 @@ - + diff --git a/architecture/render-pipeline.html b/architecture/render-pipeline.html index 5de3b25e074..225056dd51e 100644 --- a/architecture/render-pipeline.html +++ b/architecture/render-pipeline.html @@ -17,7 +17,7 @@ - + diff --git a/architecture/threading-model.html b/architecture/threading-model.html index 102e4a9a78f..df815983c48 100644 --- a/architecture/threading-model.html +++ b/architecture/threading-model.html @@ -17,7 +17,7 @@ - + diff --git a/architecture/view-flattening.html b/architecture/view-flattening.html index 7f918200e93..b22984a397b 100644 --- a/architecture/view-flattening.html +++ b/architecture/view-flattening.html @@ -17,7 +17,7 @@ - + diff --git a/architecture/xplat-implementation.html b/architecture/xplat-implementation.html index 2e1d6f3f88f..a568b4976d8 100644 --- a/architecture/xplat-implementation.html +++ b/architecture/xplat-implementation.html @@ -17,7 +17,7 @@ - + diff --git a/assets/js/114e0000.8243f161.js b/assets/js/114e0000.8243f161.js deleted file mode 100644 index 4c36c5ee4c6..00000000000 --- a/assets/js/114e0000.8243f161.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 114e0000.8243f161.js.LICENSE.txt */ -"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([[79013],{44319:(e,n,r)=>{r.d(n,{ZP:()=>l,d$:()=>s});var i=r(24246),d=r(71670);const s=[];function c(e){const n={blockquote:"blockquote",code:"code",p:"p",pre:"pre",...(0,d.a)(),...e.components};return(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u4e4b\u524d\u5168\u5c40\u5b89\u88c5\u8fc7\u65e7\u7684",(0,i.jsx)(n.code,{children:"react-native-cli"}),"\u547d\u4ee4\u884c\u5de5\u5177\uff0c\u8bf7\u4f7f\u7528",(0,i.jsx)(n.code,{children:"npm uninstall -g react-native-cli"}),"\u5378\u8f7d\u6389\u5b83\u4ee5\u907f\u514d\u4e00\u4e9b\u51b2\u7a81\uff1a"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npm uninstall -g react-native-cli @react-native-community/cli\n"})}),"\n"]})}function l(e={}){const{wrapper:n}={...(0,d.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},15675:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>N,contentTitle:()=>w,default:()=>D,frontMatter:()=>f,metadata:()=>S,toc:()=>y});var i=r(24246),d=r(71670),s=r(48375),c=r(86386),l=r(11674),o=r(44319);const a=[{value:"\u5b89\u88c5\u4f9d\u8d56",id:"\u5b89\u88c5\u4f9d\u8d56",level:2},{value:"Node",id:"node",level:3},{value:"Yarn",id:"yarn",level:3},{value:"Watchman",id:"watchman",level:3},{value:"Java Development Kit",id:"java-development-kit",level:3},{value:"Android \u5f00\u53d1\u73af\u5883",id:"android-\u5f00\u53d1\u73af\u5883",level:3},{value:"\u521b\u5efa\u65b0\u9879\u76ee",id:"\u521b\u5efa\u65b0\u9879\u76ee",level:2},...o.d$,{value:"[\u53ef\u9009\u53c2\u6570] \u6307\u5b9a\u7248\u672c\u6216\u9879\u76ee\u6a21\u677f",id:"\u53ef\u9009\u53c2\u6570-\u6307\u5b9a\u7248\u672c\u6216\u9879\u76ee\u6a21\u677f",level:3},{value:"\u51c6\u5907 Android \u8bbe\u5907",id:"\u51c6\u5907-android-\u8bbe\u5907",level:2},{value:"\u4f7f\u7528 Android \u771f\u673a",id:"\u4f7f\u7528-android-\u771f\u673a",level:3},{value:"\u4f7f\u7528 Android \u6a21\u62df\u5668",id:"\u4f7f\u7528-android-\u6a21\u62df\u5668",level:3},{value:"\u7f16\u8bd1\u5e76\u8fd0\u884c React Native \u5e94\u7528",id:"\u7f16\u8bd1\u5e76\u8fd0\u884c-react-native-\u5e94\u7528",level:2},{value:"\u4fee\u6539\u9879\u76ee",id:"\u4fee\u6539\u9879\u76ee",level:3},{value:"\u5b8c\u6210\u4e86\uff01",id:"\u5b8c\u6210\u4e86",level:3},{value:"\u63a5\u4e0b\u6765\uff1f",id:"\u63a5\u4e0b\u6765",level:2}];function t(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,d.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h2,{id:"\u5b89\u88c5\u4f9d\u8d56",children:"\u5b89\u88c5\u4f9d\u8d56"}),"\n",(0,i.jsx)(n.p,{children:"\u5fc5\u987b\u5b89\u88c5\u7684\u4f9d\u8d56\u6709\uff1aNode\u3001JDK \u548c Android Studio\u3002"}),"\n",(0,i.jsxs)(n.p,{children:["\u867d\u7136\u4f60\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"\u4efb\u4f55\u7f16\u8f91\u5668"}),"\u6765\u5f00\u53d1\u5e94\u7528\uff08\u7f16\u5199 js \u4ee3\u7801\uff09\uff0c\u4f46\u4f60\u4ecd\u7136\u5fc5\u987b\u5b89\u88c5 Android Studio \u6765\u83b7\u5f97\u7f16\u8bd1 Android \u5e94\u7528\u6240\u9700\u7684\u5de5\u5177\u548c\u73af\u5883\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"node",children:"Node"}),"\n",(0,i.jsxs)(n.p,{children:["\u53c2\u7167 Node \u5b98\u65b9\u7684",(0,i.jsx)(n.a,{href:"https://nodejs.org/en/download/package-manager/",children:"Linux \u5b89\u88c5\u6307\u5357"}),"\u6765\u5b89\u88c5 Node 18 \u4ee5\u4e0a\u7684\u7248\u672c\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u6ce8\u610f\uff1a\u5f3a\u70c8\u5efa\u8bae\u59cb\u7ec8\u9009\u62e9 Node \u5f53\u524d\u7684 LTS \uff08\u957f\u671f\u7ef4\u62a4\uff09\u7248\u672c\uff0c\u4e00\u822c\u662f\u5076\u6570\u7248\u672c\uff0c\u4e0d\u8981\u9009\u62e9\u504f\u5b9e\u9a8c\u6027\u8d28\u7684\u5947\u6570\u7248\u672c\u3002"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"\u5b89\u88c5\u5b8c Node \u540e\u5efa\u8bae\u8bbe\u7f6e npm \u955c\u50cf\uff08\u6dd8\u5b9d\u6e90\uff09\u4ee5\u52a0\u901f\u540e\u9762\u7684\u8fc7\u7a0b\uff08\u6216\u4f7f\u7528\u79d1\u5b66\u4e0a\u7f51\u5de5\u5177\uff09\u3002"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u6ce8\u610f\uff1a\u4e0d\u8981\u4f7f\u7528 cnpm\uff01cnpm \u5b89\u88c5\u7684\u6a21\u5757\u8def\u5f84\u6bd4\u8f83\u5947\u602a\uff0creact native \u4e0d\u80fd\u6b63\u5e38\u8bc6\u522b\uff01"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:"# \u4f7f\u7528nrm\u5de5\u5177\u5207\u6362\u6dd8\u5b9d\u6e90\nnpx nrm use taobao\n\n# \u5982\u679c\u4e4b\u540e\u9700\u8981\u5207\u6362\u56de\u5b98\u65b9\u6e90\u53ef\u4f7f\u7528\nnpx nrm use npm\n"})}),"\n",(0,i.jsx)(n.h3,{id:"yarn",children:"Yarn"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"http://yarnpkg.com",children:"Yarn"}),"\u662f Facebook \u63d0\u4f9b\u7684\u66ff\u4ee3 npm \u7684\u5de5\u5177\uff0c\u53ef\u4ee5\u52a0\u901f node \u6a21\u5757\u7684\u4e0b\u8f7d\u3002"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:"npm install -g yarn\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u5b89\u88c5\u5b8c yarn \u4e4b\u540e\u5c31\u53ef\u4ee5\u7528 yarn \u4ee3\u66ff npm \u4e86\uff0c\u4f8b\u5982\u7528",(0,i.jsx)(n.code,{children:"yarn"}),"\u4ee3\u66ff",(0,i.jsx)(n.code,{children:"npm install"}),"\u547d\u4ee4\uff0c\u7528",(0,i.jsx)(n.code,{children:"yarn add \u67d0\u7b2c\u4e09\u65b9\u5e93\u540d"}),"\u4ee3\u66ff",(0,i.jsx)(n.code,{children:"npm install \u67d0\u7b2c\u4e09\u65b9\u5e93\u540d"}),"\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"watchman",children:"Watchman"}),"\n",(0,i.jsxs)(n.p,{children:["\u53c2\u7167",(0,i.jsx)(n.a,{href:"https://facebook.github.io/watchman/docs/install.html#buildinstall",children:"Watchman \u7684\u5b89\u88c5\u8bf4\u660e"}),"\u6765\u4ece\u6e90\u7801\u6765\u7f16\u8bd1\u548c\u5b89\u88c5 Watchman\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://facebook.github.io/watchman/docs/install.html",children:"Watchman"}),"\u662f\u7531 Facebook \u63d0\u4f9b\u7684\u76d1\u89c6\u6587\u4ef6\u7cfb\u7edf\u53d8\u66f4\u7684\u5de5\u5177\u3002\u5b89\u88c5\u6b64\u5de5\u5177\u53ef\u4ee5\u63d0\u9ad8\u5f00\u53d1\u65f6\u7684\u6027\u80fd\uff08metro \u53ef\u4ee5\u5feb\u901f\u6355\u6349\u6587\u4ef6\u7684\u53d8\u5316\u4ece\u800c\u5b9e\u73b0\u5b9e\u65f6\u5237\u65b0\uff09\u3002"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"java-development-kit",children:"Java Development Kit"}),"\n",(0,i.jsxs)(n.p,{children:["React Native \u5f53\u524d\u9700\u8981 Java Development Kit [JDK] 17\u3002\u4f60\u53ef\u4ee5\u5728\u547d\u4ee4\u884c\u4e2d\u8f93\u5165\n",(0,i.jsx)(n.code,{children:"javac -version"}),"\uff08\u8bf7\u6ce8\u610f\u662f javac\uff0c\u4e0d\u662f java\uff09\u6765\u67e5\u770b\u4f60\u5f53\u524d\u5b89\u88c5\u7684 JDK \u7248\u672c\u3002\u5982\u679c\u7248\u672c\u4e0d\u5408\u8981\u6c42\uff0c\u5219\u53ef\u4ee5\u53bb",(0,i.jsx)(n.a,{href:"https://adoptium.net/?variant=openjdk17&jvmVariant=hotspot",children:"Temurin"}),"\u6216",(0,i.jsx)(n.a,{href:"https://www.oracle.com/java/technologies/downloads/#java17",children:"Oracle JDK"}),"\u4e0a\u4e0b\u8f7d(\u540e\u8005\u4e0b\u8f7d\u9700\u6ce8\u518c\u767b\u5f55)\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u4f4e\u4e8e 0.73 \u7248\u672c\u7684 React Native \u9700\u8981 JDK 11 \u7248\u672c\uff0c\u800c\u4f4e\u4e8e 0.67 \u7684\u9700\u8981 JDK 8 \u7248\u672c\u3002"}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"android-\u5f00\u53d1\u73af\u5883",children:"Android \u5f00\u53d1\u73af\u5883"}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u4e4b\u524d\u6ca1\u6709\u63a5\u89e6\u8fc7 Android \u7684\u5f00\u53d1\u73af\u5883\uff0c\u90a3\u4e48\u8bf7\u505a\u597d\u5fc3\u7406\u51c6\u5907\uff0c\u8fd9\u4e00\u8fc7\u7a0b\u76f8\u5f53\u7e41\u7410\u3002\u8bf7",(0,i.jsx)(n.code,{children:"\u4e07\u5206\u4ed4\u7ec6"}),"\u5730\u9605\u8bfb\u4e0b\u9762\u7684\u8bf4\u660e\uff0c\u4e25\u683c\u5bf9\u7167\u6587\u6863\u8fdb\u884c\u914d\u7f6e\u64cd\u4f5c\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u8bd1\u6ce8\uff1a\u8bf7\u6ce8\u610f\uff01\uff01\uff01\u56fd\u5185\u7528\u6237",(0,i.jsx)(n.code,{children:"\u5fc5\u987b\u5fc5\u987b\u5fc5\u987b"}),"\u6709\u7a33\u5b9a\u7684\u4ee3\u7406\u8f6f\u4ef6\uff0c\u5426\u5219\u5728\u4e0b\u8f7d\u3001\u5b89\u88c5\u3001\u914d\u7f6e\u8fc7\u7a0b\u4e2d\u4f1a\u4e0d\u65ad\u906d\u9047\u94fe\u63a5\u8d85\u65f6\u6216\u65ad\u5f00\uff0c\u65e0\u6cd5\u8fdb\u884c\u5f00\u53d1\u5de5\u4f5c\u3002\u67d0\u4e9b\u4ee3\u7406\u8f6f\u4ef6\u53ef\u80fd\u53ea\u63d0\u4f9b\u6d4f\u89c8\u5668\u7684\u4ee3\u7406\u529f\u80fd\uff0c\u6216\u53ea\u9488\u5bf9\u7279\u5b9a\u7f51\u7ad9\u4ee3\u7406\u7b49\u7b49\uff0c\u8bf7\u81ea\u884c\u7814\u7a76\u914d\u7f6e\u6216\u66f4\u6362\u5176\u4ed6\u8f6f\u4ef6\u3002\u603b\u4e4b\u5982\u679c\u62a5\u9519\u4e2d\u51fa\u73b0\u6709\u7f51\u5740\uff0c\u90a3\u5c31\u662f\u56e0\u4e3a\u94fe\u63a5\u6e90\u4ed3\u5e93\u7684\u7f51\u7edc\u94fe\u63a5\u88ab\u963b\u65ad\u4e86\uff0c\u8fd9\u4e00\u963b\u65ad\u73b0\u8c61\u53ef\u80fd\u56e0\u65f6\u95f4\u3001\u5730\u533a\u3001\u8fd0\u8425\u5546\u800c\u4e0d\u540c\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u4e5f\u53ef\u4ee5\u5c1d\u8bd5\u53c2\u8003\u8fd9\u91cc\u7684\u505a\u6cd5",(0,i.jsx)(n.a,{href:"https://github.com/scwang90/SmartRefreshLayout/issues/1376#issuecomment-938422964",children:"\u8bbe\u7f6e\u963f\u91cc\u4e91\u7684 maven \u955c\u50cf\u6e90"}),"\uff0c\u4f46\u8fd9\u4e2a\u505a\u6cd5\u53ef\u80fd\u968f gradle \u6216\u8005 rn \u7248\u672c\u7684\u4e0d\u540c\u800c\u5931\u6548\u3002"]}),"\n"]}),"\n",(0,i.jsx)("h4",{id:"android-studio",children:"1. \u5b89\u88c5 Android Studio"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://developer.android.google.cn/studio/",children:"\u9996\u5148\u4e0b\u8f7d\u548c\u5b89\u88c5 Android Studio"}),'\uff0c\u56fd\u5185\u7528\u6237\u53ef\u80fd\u65e0\u6cd5\u6253\u5f00\u5b98\u65b9\u94fe\u63a5\uff0c\u53ef\u81ea\u884c\u4f7f\u7528\u641c\u7d22\u5f15\u64ce\u641c\u7d22\u53ef\u7528\u7684\u4e0b\u8f7d\u94fe\u63a5\u3002\u5b89\u88c5\u754c\u9762\u4e2d\u9009\u62e9"Custom"\u9009\u9879\uff0c\u786e\u4fdd\u9009\u4e2d\u4e86\u4ee5\u4e0b\u51e0\u9879\uff1a']}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"Android SDK"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"Android SDK Platform"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"Android Virtual Device"})}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:'\u7136\u540e\u70b9\u51fb"Next"\u6765\u5b89\u88c5\u9009\u4e2d\u7684\u7ec4\u4ef6\u3002'}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u5982\u679c\u9009\u62e9\u6846\u662f\u7070\u7684\uff0c\u4f60\u4e5f\u53ef\u4ee5\u5148\u8df3\u8fc7\uff0c\u7a0d\u540e\u518d\u6765\u5b89\u88c5\u8fd9\u4e9b\u7ec4\u4ef6\u3002"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u770b\u5230\u6b22\u8fce\u754c\u9762\u65f6\uff0c\u5c31\u53ef\u4ee5\u8fdb\u884c\u4e0b\u9762\u7684\u64cd\u4f5c\u4e86\u3002"}),"\n",(0,i.jsx)("h4",{id:"android-sdk",children:"2. \u5b89\u88c5 Android SDK"}),"\n",(0,i.jsxs)(n.p,{children:["Android Studio \u9ed8\u8ba4\u4f1a\u5b89\u88c5\u6700\u65b0\u7248\u672c\u7684 Android SDK\u3002\u76ee\u524d\u7f16\u8bd1 React Native \u5e94\u7528\u9700\u8981\u7684\u662f",(0,i.jsx)(n.code,{children:"Android 14 (UpsideDownCake)"}),"\u7248\u672c\u7684 SDK\uff08\u6ce8\u610f SDK \u7248\u672c\u4e0d\u7b49\u4e8e\u7ec8\u7aef\u7cfb\u7edf\u7248\u672c\uff0cRN \u76ee\u524d\u652f\u6301 android 6 \u4ee5\u4e0a\u8bbe\u5907\uff09\u3002\u4f60\u53ef\u4ee5\u5728 Android Studio \u7684 SDK Manager \u4e2d\u9009\u62e9\u5b89\u88c5\u5404\u7248\u672c\u7684 SDK\u3002"]}),"\n",(0,i.jsx)(n.p,{children:'\u4f60\u53ef\u4ee5\u5728 Android Studio \u7684\u6b22\u8fce\u754c\u9762\u4e2d\u627e\u5230 SDK Manager\u3002\u70b9\u51fb"Configure"\uff0c\u7136\u540e\u5c31\u80fd\u770b\u5230"SDK Manager"\u3002'}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:['SDK Manager \u8fd8\u53ef\u4ee5\u5728 Android Studio \u7684"Preferences"\u83dc\u5355\u4e2d\u627e\u5230\u3002\u5177\u4f53\u8def\u5f84\u662f',(0,i.jsx)(n.strong,{children:"Appearance & Behavior"})," \u2192 ",(0,i.jsx)(n.strong,{children:"System Settings"})," \u2192 ",(0,i.jsx)(n.strong,{children:"Android SDK"}),"\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:['\u5728 SDK Manager \u4e2d\u9009\u62e9"SDK Platforms"\u9009\u9879\u5361\uff0c\u7136\u540e\u5728\u53f3\u4e0b\u89d2\u52fe\u9009"Show Package Details"\u3002\u5c55\u5f00',(0,i.jsx)(n.code,{children:"Android 14 (UpsideDownCake)"}),"\u9009\u9879\uff0c\u786e\u4fdd\u52fe\u9009\u4e86\u4e0b\u9762\u8fd9\u4e9b\u7ec4\u4ef6\uff08\u5982\u679c\u770b\u4e0d\u5230\u8fd9\u4e2a\u754c\u9762\uff0c\u5219\u9700\u8981\u4f7f\u7528\u7a33\u5b9a\u7684\u4ee3\u7406\u8f6f\u4ef6\uff09\uff1a"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"Android SDK Platform 34"})}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"Intel x86 Atom_64 System Image"}),"\uff08\u5b98\u65b9\u6a21\u62df\u5668\u955c\u50cf\u6587\u4ef6\uff0c\u4f7f\u7528\u975e\u5b98\u65b9\u6a21\u62df\u5668\u4e0d\u9700\u8981\u5b89\u88c5\u6b64\u7ec4\u4ef6\uff09"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:['\u7136\u540e\u70b9\u51fb"SDK Tools"\u9009\u9879\u5361\uff0c\u540c\u6837\u52fe\u4e2d\u53f3\u4e0b\u89d2\u7684"Show Package Details"\u3002\u5c55\u5f00"Android SDK Build-Tools"\u9009\u9879\uff0c\u786e\u4fdd\u9009\u4e2d\u4e86 React Native \u6240\u5fc5\u987b\u7684',(0,i.jsx)(n.code,{children:"34.0.0"}),"\u7248\u672c\u3002\u4f60\u53ef\u4ee5\u540c\u65f6\u5b89\u88c5\u591a\u4e2a\u5176\u4ed6\u7248\u672c\u3002"]}),"\n",(0,i.jsx)(n.p,{children:'\u6700\u540e\u70b9\u51fb"Apply"\u6765\u4e0b\u8f7d\u548c\u5b89\u88c5\u8fd9\u4e9b\u7ec4\u4ef6\u3002'}),"\n",(0,i.jsx)("h4",{children:"3. \u914d\u7f6e ANDROID_HOME \u73af\u5883\u53d8\u91cf"}),"\n",(0,i.jsx)(n.p,{children:"React Native \u9700\u8981\u901a\u8fc7\u73af\u5883\u53d8\u91cf\u6765\u4e86\u89e3\u4f60\u7684 Android SDK \u88c5\u5728\u4ec0\u4e48\u8def\u5f84\uff0c\u4ece\u800c\u6b63\u5e38\u8fdb\u884c\u7f16\u8bd1\u3002"}),"\n",(0,i.jsxs)(n.p,{children:["\u5177\u4f53\u7684\u505a\u6cd5\u662f\u628a\u4e0b\u9762\u7684\u547d\u4ee4\u52a0\u5165\u5230 shell \u7684\u914d\u7f6e\u6587\u4ef6\u4e2d\u3002\u5982\u679c\u4f60\u7684 shell \u662f zsh\uff0c\u5219\u914d\u7f6e\u6587\u4ef6\u4e3a",(0,i.jsx)(n.code,{children:"~/.zshrc"}),"\uff0c\u5982\u679c\u662f bash \u5219\u4e3a",(0,i.jsx)(n.code,{children:"~/.bash_profile"}),"\uff08\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"echo $0"}),"\u547d\u4ee4\u67e5\u770b\u4f60\u6240\u4f7f\u7528\u7684 shell\uff09\uff1a"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"# \u5982\u679c\u4f60\u4e0d\u662f\u901a\u8fc7Android Studio\u5b89\u88c5\u7684sdk\uff0c\u5219\u5176\u8def\u5f84\u53ef\u80fd\u4e0d\u540c\uff0c\u8bf7\u81ea\u884c\u786e\u5b9a\u6e05\u695a\u3002\nexport ANDROID_HOME=$HOME/Library/Android/sdk\nexport PATH=$PATH:$ANDROID_HOME/platform-tools\nexport PATH=$PATH:$ANDROID_HOME/emulator\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u4f7f\u7528",(0,i.jsx)(n.code,{children:"source $HOME/.zshrc"}),"\u547d\u4ee4\u6765\u4f7f\u73af\u5883\u53d8\u91cf\u8bbe\u7f6e\u7acb\u5373\u751f\u6548\uff08\u5426\u5219\u91cd\u542f\u540e\u624d\u751f\u6548\uff09\u3002\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"echo $ANDROID_HOME"}),"\u68c0\u67e5\u6b64\u53d8\u91cf\u662f\u5426\u5df2\u6b63\u786e\u8bbe\u7f6e"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:['\u8bf7\u786e\u4fdd\u4f60\u6b63\u786e\u6307\u5b9a\u4e86 Android SDK \u8def\u5f84\u3002\u4f60\u53ef\u4ee5\u5728 Android Studio \u7684"Preferences"\u83dc\u5355\u4e2d\u67e5\u770b SDK \u7684\u771f\u5b9e\u8def\u5f84\uff0c\u5177\u4f53\u662f',(0,i.jsx)(n.strong,{children:"Appearance & Behavior"})," \u2192 ",(0,i.jsx)(n.strong,{children:"System Settings"})," \u2192 ",(0,i.jsx)(n.strong,{children:"Android SDK"})]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"\u521b\u5efa\u65b0\u9879\u76ee",children:"\u521b\u5efa\u65b0\u9879\u76ee"}),"\n",(0,i.jsx)(o.ZP,{}),"\n",(0,i.jsxs)(n.p,{children:['\u4f7f\u7528 React Native \u5185\u5efa\u7684\u547d\u4ee4\u884c\u5de5\u5177\u6765\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a"AwesomeProject"\u7684\u65b0\u9879\u76ee\u3002\u8fd9\u4e2a\u547d\u4ee4\u884c\u5de5\u5177\u4e0d\u9700\u8981\u5b89\u88c5\uff0c\u53ef\u4ee5\u76f4\u63a5\u7528 node \u81ea\u5e26\u7684',(0,i.jsx)(n.code,{children:"npx"}),"\u547d\u4ee4\u6765\u4f7f\u7528\uff1a"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npx react-native@latest init AwesomeProject\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u662f\u60f3\u628a React Native \u96c6\u6210\u5230\u73b0\u6709\u7684\u539f\u751f\u9879\u76ee\u4e2d\uff0c\u5219\u6b65\u9aa4\u5b8c\u5168\u4e0d\u540c\uff0c\u8bf7\u53c2\u8003",(0,i.jsx)(n.a,{href:"/docs/next/integration-with-existing-apps",children:"\u96c6\u6210\u5230\u73b0\u6709\u539f\u751f\u5e94\u7528"}),"\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"\u53ef\u9009\u53c2\u6570-\u6307\u5b9a\u7248\u672c\u6216\u9879\u76ee\u6a21\u677f",children:"[\u53ef\u9009\u53c2\u6570] \u6307\u5b9a\u7248\u672c\u6216\u9879\u76ee\u6a21\u677f"}),"\n",(0,i.jsxs)(n.p,{children:["\u4f60\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"--version"}),"\u53c2\u6570\uff08\u6ce8\u610f\u662f",(0,i.jsx)(n.code,{children:"\u4e24"}),"\u4e2a\u6760\uff09\u521b\u5efa\u6307\u5b9a\u7248\u672c\u7684\u9879\u76ee\u3002\u4f8b\u5982\uff1a"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npx react-native@X.XX.X init AwesomeProject --version X.XX.X\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u8fd8\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"--template"}),"\u6765\u4f7f\u7528\u4e00\u4e9b\u793e\u533a\u63d0\u4f9b\u7684\u6a21\u677f\u3002"]}),"\n",(0,i.jsx)(n.h2,{id:"\u51c6\u5907-android-\u8bbe\u5907",children:"\u51c6\u5907 Android \u8bbe\u5907"}),"\n",(0,i.jsxs)(n.p,{children:["\u4f60\u9700\u8981\u51c6\u5907\u4e00\u53f0 Android \u8bbe\u5907\u6765\u8fd0\u884c React Native Android \u5e94\u7528\u3002\u8fd9\u91cc\u6240\u6307\u7684\u8bbe\u5907\u65e2\u53ef\u4ee5\u662f\u771f\u673a\uff0c\u4e5f\u53ef\u4ee5\u662f\u6a21\u62df\u5668\u3002\u540e\u9762\u6211\u4eec\u6240\u6709\u7684\u6587\u6863\u9664\u975e\u7279\u522b\u8bf4\u660e\uff0c\u5e76\u4e0d\u533a\u5206\u771f\u673a\u6216\u8005\u6a21\u62df\u5668\u3002Android \u5b98\u65b9\u63d0\u4f9b\u4e86\u540d\u4e3a Android Virtual Device\uff08\u7b80\u79f0 AVD\uff09\u7684\u6a21\u62df\u5668\u3002\u6b64\u5916\u8fd8\u6709\u5f88\u591a\u7b2c\u4e09\u65b9\u63d0\u4f9b\u7684\u6a21\u62df\u5668\u5982",(0,i.jsx)(n.a,{href:"https://www.genymotion.com/download",children:"Genymotion"}),"\u3001BlueStack \u7b49\u3002\u4e00\u822c\u6765\u8bf4\u5b98\u65b9\u6a21\u62df\u5668\u514d\u8d39\u3001\u529f\u80fd\u5b8c\u6574\uff0c\u4f46\u6027\u80fd\u8f83\u5dee\u3002\u7b2c\u4e09\u65b9\u6a21\u62df\u5668\u6027\u80fd\u8f83\u597d\uff0c\u4f46\u53ef\u80fd\u9700\u8981\u4ed8\u8d39\uff0c\u6216\u5e26\u6709\u5e7f\u544a\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"\u4f7f\u7528-android-\u771f\u673a",children:"\u4f7f\u7528 Android \u771f\u673a"}),"\n",(0,i.jsxs)(n.p,{children:["\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528 Android \u771f\u673a\u6765\u4ee3\u66ff\u6a21\u62df\u5668\u8fdb\u884c\u5f00\u53d1\uff0c\u53ea\u9700\u7528 usb \u6570\u636e\u7ebf\u8fde\u63a5\u5230\u7535\u8111\uff0c\u7136\u540e\u9075\u7167",(0,i.jsx)(n.a,{href:"/docs/next/running-on-device",children:"\u5728\u8bbe\u5907\u4e0a\u8fd0\u884c"}),"\u8fd9\u7bc7\u6587\u6863\u7684\u8bf4\u660e\u64cd\u4f5c\u5373\u53ef\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"\u4f7f\u7528-android-\u6a21\u62df\u5668",children:"\u4f7f\u7528 Android \u6a21\u62df\u5668"}),"\n",(0,i.jsx)(n.p,{children:'\u4f60\u53ef\u4ee5\u4f7f\u7528 Android Studio \u6253\u5f00\u9879\u76ee\u4e0b\u7684"android"\u76ee\u5f55\uff0c\u7136\u540e\u53ef\u4ee5\u4f7f\u7528"AVD Manager"\u6765\u67e5\u770b\u53ef\u7528\u7684\u865a\u62df\u8bbe\u5907\uff0c\u5b83\u7684\u56fe\u6807\u770b\u8d77\u6765\u50cf\u4e0b\u9762\u8fd9\u6837\uff1a'}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Android Studio AVD Manager",src:r(17504).Z+"",width:"29",height:"25"})}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u521a\u521a\u624d\u5b89\u88c5 Android Studio\uff0c\u90a3\u4e48\u53ef\u80fd\u9700\u8981\u5148",(0,i.jsx)(n.a,{href:"https://developer.android.com/studio/run/managing-avds.html",children:"\u521b\u5efa\u4e00\u4e2a\u865a\u62df\u8bbe\u5907"}),'\u3002\u70b9\u51fb"Create Virtual Device..."\uff0c\u7136\u540e\u9009\u62e9\u6240\u9700\u7684\u8bbe\u5907\u7c7b\u578b\u5e76\u70b9\u51fb"Next"\uff0c\u7136\u540e\u9009\u62e9',(0,i.jsx)(n.strong,{children:"Tiramisu"})," API Level 33 image."]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u8bd1\u6ce8\uff1a\u8bf7\u4e0d\u8981\u8f7b\u6613\u70b9\u51fb Android Studio \u4e2d\u53ef\u80fd\u5f39\u51fa\u7684\u5efa\u8bae\u66f4\u65b0\u9879\u76ee\u4e2d\u67d0\u4f9d\u8d56\u9879\u7684\u5efa\u8bae\uff0c\u5426\u5219\u53ef\u80fd\u5bfc\u81f4\u65e0\u6cd5\u8fd0\u884c\u3002"}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u5efa\u8bae\u5148\u5f00\u542f",(0,i.jsx)(n.a,{href:"https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux",children:"\u865a\u62df\u52a0\u901f\u6280\u672f"}),"\u4ee5\u63d0\u9ad8\u6a21\u62df\u5668\u6027\u80fd\u3002"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:'\u7136\u540e\u70b9\u51fb"Next"\u548c"Finish"\u6765\u5b8c\u6210\u865a\u62df\u8bbe\u5907\u7684\u521b\u5efa\u3002\u73b0\u5728\u4f60\u5e94\u8be5\u53ef\u4ee5\u70b9\u51fb\u865a\u62df\u8bbe\u5907\u65c1\u7684\u7eff\u8272\u4e09\u89d2\u6309\u94ae\u6765\u542f\u52a8\u5b83\u4e86\u3002\u7136\u540e\u6211\u4eec\u53ef\u4ee5\u5c1d\u8bd5\u8fd0\u884c\u5e94\u7528\u4e86\u3002'}),"\n",(0,i.jsx)(n.h2,{id:"\u7f16\u8bd1\u5e76\u8fd0\u884c-react-native-\u5e94\u7528",children:"\u7f16\u8bd1\u5e76\u8fd0\u884c React Native \u5e94\u7528"}),"\n",(0,i.jsxs)(n.p,{children:["\u786e\u4fdd\u4f60\u5148\u8fd0\u884c\u4e86\u6a21\u62df\u5668\u6216\u8005\u8fde\u63a5\u4e86\u771f\u673a\uff0c\u7136\u540e\u5728\u4f60\u7684\u9879\u76ee\u76ee\u5f55\u4e2d\u8fd0\u884c",(0,i.jsx)(n.code,{children:"yarn android"}),"\u6216\u8005",(0,i.jsx)(n.code,{children:"yarn react-native run-android"}),"\uff1a"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:"cd AwesomeProject\nyarn android\n# \u6216\u8005\nyarn react-native run-android\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u6b64\u547d\u4ee4\u4f1a\u5bf9\u9879\u76ee\u7684\u539f\u751f\u90e8\u5206\u8fdb\u884c\u7f16\u8bd1\uff0c\u540c\u65f6\u5728\u53e6\u5916\u4e00\u4e2a\u547d\u4ee4\u884c\u4e2d\u542f\u52a8",(0,i.jsx)(n.code,{children:"Metro"}),"\u670d\u52a1\u5bf9 js \u4ee3\u7801\u8fdb\u884c\u5b9e\u65f6\u6253\u5305\u5904\u7406\uff08\u7c7b\u4f3c webpack\uff09\u3002",(0,i.jsx)(n.code,{children:"Metro"}),"\u670d\u52a1\u4e5f\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"yarn start"}),"\u547d\u4ee4\u5355\u72ec\u542f\u52a8\u3002"]}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u914d\u7f6e\u6ca1\u6709\u95ee\u9898\uff0c\u4f60\u5e94\u8be5\u53ef\u4ee5\u770b\u5230\u5e94\u7528\u81ea\u52a8\u5b89\u88c5\u5230\u8bbe\u5907\u4e0a\u5e76\u5f00\u59cb\u8fd0\u884c\u3002\u6ce8\u610f\u7b2c\u4e00\u6b21\u8fd0\u884c\u65f6\u9700\u8981\u4e0b\u8f7d\u5927\u91cf\u7f16\u8bd1\u4f9d\u8d56\uff0c\u8017\u65f6\u53ef\u80fd\u6570\u5341\u5206\u949f\u3002\u6b64\u8fc7\u7a0b",(0,i.jsx)(n.code,{children:"\u4e25\u91cd\u4f9d\u8d56\u7a33\u5b9a\u7684\u4ee3\u7406\u8f6f\u4ef6"}),"\uff0c\u5426\u5219\u5c06\u9891\u7e41\u906d\u9047\u94fe\u63a5\u8d85\u65f6\u548c\u65ad\u5f00\uff0c\u5bfc\u81f4\u65e0\u6cd5\u8fd0\u884c\u3002"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"npx react-native run-android"}),"\u53ea\u662f\u8fd0\u884c\u5e94\u7528\u7684\u65b9\u5f0f\u4e4b\u4e00\u3002\u4f60\u4e5f\u53ef\u4ee5\u5728 Android Studio \u4e2d\u76f4\u63a5\u8fd0\u884c\u5e94\u7528\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u8bd1\u6ce8\uff1a\u5efa\u8bae\u5728",(0,i.jsx)(n.code,{children:"run-android"}),"\u6210\u529f\u540e\u518d\u5c1d\u8bd5\u4f7f\u7528 Android Studio \u542f\u52a8\u3002\u8bf7\u4e0d\u8981\u8f7b\u6613\u70b9\u51fb Android Studio \u4e2d\u53ef\u80fd\u5f39\u51fa\u7684\u5efa\u8bae\u66f4\u65b0\u9879\u76ee\u4e2d\u67d0\u4f9d\u8d56\u9879\u7684\u5efa\u8bae\uff0c\u5426\u5219\u53ef\u80fd\u5bfc\u81f4\u65e0\u6cd5\u8fd0\u884c\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u65e0\u6cd5\u6b63\u5e38\u8fd0\u884c\uff0c\u9047\u5230\u5947\u5947\u602a\u602a\u7684\u7ea2\u5c4f\u9519\u8bef\uff0c\u5148\u56de\u5934",(0,i.jsx)(n.code,{children:"\u4ed4\u7ec6\u5bf9\u7167\u6587\u6863\u68c0\u67e5"}),"\uff0c\u7136\u540e\u53ef\u4ee5\u770b\u770b",(0,i.jsx)(n.a,{href:"https://github.com/reactnativecn/react-native-website/issues",children:"\u95ee\u9898\u8ba8\u8bba\u533a"}),"\u3002\u4e0d\u540c\u65f6\u671f\u4e0d\u540c\u7248\u672c\u53ef\u80fd\u4f1a\u78b0\u5230\u4e0d\u540c\u7684\u95ee\u9898\uff0c\u6211\u4eec\u4f1a\u5728\u8bba\u575b\u4e2d\u53ca\u65f6\u89e3\u7b54\u66f4\u65b0\u3002\u4f46\u8bf7\u6ce8\u610f",(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.em,{children:"\u5343\u4e07\u4e0d\u8981"})}),"\u6267\u884c bundle \u547d\u4ee4\uff0c\u90a3\u6837\u4f1a\u5bfc\u81f4\u4ee3\u7801\u5b8c\u5168\u65e0\u6cd5\u5237\u65b0\u3002"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"\u4fee\u6539\u9879\u76ee",children:"\u4fee\u6539\u9879\u76ee"}),"\n",(0,i.jsx)(n.p,{children:"\u73b0\u5728\u4f60\u5df2\u7ecf\u6210\u529f\u8fd0\u884c\u4e86\u9879\u76ee\uff0c\u6211\u4eec\u53ef\u4ee5\u5f00\u59cb\u5c1d\u8bd5\u52a8\u624b\u6539\u4e00\u6539\u4e86\uff1a"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\u4f7f\u7528\u4f60\u559c\u6b22\u7684\u6587\u672c\u7f16\u8f91\u5668\u6253\u5f00",(0,i.jsx)(n.code,{children:"App.tsx"}),"\u5e76\u968f\u4fbf\u6539\u4e0a\u51e0\u884c"]}),"\n",(0,i.jsxs)(n.li,{children:["\u6309\u4e24\u4e0b ",(0,i.jsx)("kbd",{children:"R"})," \u952e\uff0c\u6216\u662f\u5728\u5f00\u53d1\u8005\u83dc\u5355\u4e2d\u9009\u62e9 ",(0,i.jsx)(n.em,{children:"Reload"}),"\uff0c\u5c31\u53ef\u4ee5\u770b\u5230\u4f60\u7684\u6700\u65b0\u4fee\u6539\u3002"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"\u5b8c\u6210\u4e86",children:"\u5b8c\u6210\u4e86\uff01"}),"\n",(0,i.jsx)(n.p,{children:"\u606d\u559c\uff01\u4f60\u5df2\u7ecf\u6210\u529f\u8fd0\u884c\u5e76\u4fee\u6539\u4e86\u4f60\u7684\u7b2c\u4e00\u4e2a React Native \u5e94\u7528"}),"\n",(0,i.jsx)("center",{children:(0,i.jsx)("img",{src:"https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/GettingStartedCongratulations.png",width:"150"})}),"\n",(0,i.jsx)(n.h2,{id:"\u63a5\u4e0b\u6765",children:"\u63a5\u4e0b\u6765\uff1f"}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u60f3\u628a React Native \u96c6\u6210\u5230\u73b0\u6709\u7684\u539f\u751f\u9879\u76ee\u4e2d\uff0c\u5219\u8bf7\u53c2\u8003",(0,i.jsx)(n.a,{href:"/docs/next/integration-with-existing-apps",children:"\u96c6\u6210\u5230\u73b0\u6709\u539f\u751f\u5e94\u7528"}),"\u3002"]}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u60f3\u4ece\u5934\u5f00\u59cb\u5b66\u4e60 React Native \u5f00\u53d1\uff0c\u53ef\u4ee5\u4ece",(0,i.jsx)(n.a,{href:"/docs/next/environment-setup",children:"\u7b80\u4ecb"}),"\u6587\u6863\u5f00\u59cb\u3002"]})]})}function h(e={}){const{wrapper:n}={...(0,d.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(t,{...e})}):t(e)}const x=[{value:"\u5b89\u88c5\u4f9d\u8d56",id:"\u5b89\u88c5\u4f9d\u8d56",level:2},{value:"Node & Watchman",id:"node--watchman",level:3},{value:"Yarn",id:"yarn",level:3},{value:"Java Development Kit",id:"java-development-kit",level:3},{value:"Android \u5f00\u53d1\u73af\u5883",id:"android-\u5f00\u53d1\u73af\u5883",level:3},{value:"3. \u914d\u7f6e ANDROID_HOME \u73af\u5883\u53d8\u91cf",id:"3-\u914d\u7f6e-android_home-\u73af\u5883\u53d8\u91cf",level:4},...o.d$,{value:"\u51c6\u5907 Android \u8bbe\u5907",id:"\u51c6\u5907-android-\u8bbe\u5907",level:2},{value:"\u4f7f\u7528 Android \u771f\u673a",id:"\u4f7f\u7528-android-\u771f\u673a",level:3},{value:"\u4f7f\u7528 Android \u6a21\u62df\u5668",id:"\u4f7f\u7528-android-\u6a21\u62df\u5668",level:3},{value:"\u7f16\u8bd1\u5e76\u8fd0\u884c React Native \u5e94\u7528",id:"\u7f16\u8bd1\u5e76\u8fd0\u884c-react-native-\u5e94\u7528",level:2},{value:"\u4fee\u6539\u9879\u76ee",id:"\u4fee\u6539\u9879\u76ee",level:3},{value:"\u5b8c\u6210\u4e86\uff01",id:"\u5b8c\u6210\u4e86",level:3},{value:"\u63a5\u4e0b\u6765\uff1f",id:"\u63a5\u4e0b\u6765",level:2}];function j(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,d.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h2,{id:"\u5b89\u88c5\u4f9d\u8d56",children:"\u5b89\u88c5\u4f9d\u8d56"}),"\n",(0,i.jsx)(n.p,{children:"\u5fc5\u987b\u5b89\u88c5\u7684\u4f9d\u8d56\u6709\uff1aNode\u3001JDK \u548c Android Studio\u3002"}),"\n",(0,i.jsxs)(n.p,{children:["\u867d\u7136\u4f60\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"\u4efb\u4f55\u7f16\u8f91\u5668"}),"\u6765\u5f00\u53d1\u5e94\u7528\uff08\u7f16\u5199 js \u4ee3\u7801\uff09\uff0c\u4f46\u4f60\u4ecd\u7136\u5fc5\u987b\u5b89\u88c5 Android Studio \u6765\u83b7\u5f97\u7f16\u8bd1 Android \u5e94\u7528\u6240\u9700\u7684\u5de5\u5177\u548c\u73af\u5883\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"node--watchman",children:"Node & Watchman"}),"\n",(0,i.jsxs)(n.p,{children:["\u6211\u4eec\u63a8\u8350\u4f7f\u7528",(0,i.jsx)(n.a,{href:"http://brew.sh/",children:"Homebrew"}),"\u6765\u5b89\u88c5 Node \u548c Watchman\u3002\u5728\u547d\u4ee4\u884c\u4e2d\u6267\u884c\u4e0b\u5217\u547d\u4ee4\u5b89\u88c5\uff08\u5982\u5b89\u88c5\u8f83\u6162\u53ef\u4ee5\u5c1d\u8bd5\u963f\u91cc\u4e91\u7684",(0,i.jsx)(n.a,{href:"https://developer.aliyun.com/mirror/homebrew",children:"\u955c\u50cf\u6e90"}),"\uff09\uff1a"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"brew install node@18\nbrew install watchman\n"})}),"\n",(0,i.jsx)(n.p,{children:"\u5982\u679c\u4f60\u5df2\u7ecf\u5b89\u88c5\u4e86 Node\uff0c\u8bf7\u68c0\u67e5\u5176\u7248\u672c\u662f\u5426\u5728 18 \u4ee5\u4e0a\u3002\u5b89\u88c5\u5b8c Node \u540e\u5efa\u8bae\u8bbe\u7f6e npm \u955c\u50cf\uff08\u6dd8\u5b9d\u6e90\uff09\u4ee5\u52a0\u901f\u540e\u9762\u7684\u8fc7\u7a0b\uff08\u6216\u4f7f\u7528\u79d1\u5b66\u4e0a\u7f51\u5de5\u5177\uff09\u3002"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u6ce8\u610f\uff1a\u5f3a\u70c8\u5efa\u8bae\u59cb\u7ec8\u9009\u62e9 Node \u5f53\u524d\u7684 LTS \uff08\u957f\u671f\u7ef4\u62a4\uff09\u7248\u672c\uff0c\u4e00\u822c\u662f\u5076\u6570\u7248\u672c\uff0c\u4e0d\u8981\u9009\u62e9\u504f\u5b9e\u9a8c\u6027\u8d28\u7684\u5947\u6570\u7248\u672c\u3002"}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u6ce8\u610f\uff1a\u4e0d\u8981\u4f7f\u7528 cnpm\uff01cnpm \u5b89\u88c5\u7684\u6a21\u5757\u8def\u5f84\u6bd4\u8f83\u5947\u602a\uff0cpackager \u4e0d\u80fd\u6b63\u5e38\u8bc6\u522b\uff01"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"# \u4f7f\u7528nrm\u5de5\u5177\u5207\u6362\u6dd8\u5b9d\u6e90\nnpx nrm use taobao\n\n# \u5982\u679c\u4e4b\u540e\u9700\u8981\u5207\u6362\u56de\u5b98\u65b9\u6e90\u53ef\u4f7f\u7528\nnpx nrm use npm\n"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://facebook.github.io/watchman",children:"Watchman"}),"\u5219\u662f\u7531 Facebook \u63d0\u4f9b\u7684\u76d1\u89c6\u6587\u4ef6\u7cfb\u7edf\u53d8\u66f4\u7684\u5de5\u5177\u3002\u5b89\u88c5\u6b64\u5de5\u5177\u53ef\u4ee5\u63d0\u9ad8\u5f00\u53d1\u65f6\u7684\u6027\u80fd\uff08packager \u53ef\u4ee5\u5feb\u901f\u6355\u6349\u6587\u4ef6\u7684\u53d8\u5316\u4ece\u800c\u5b9e\u73b0\u5b9e\u65f6\u5237\u65b0\uff09\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"yarn",children:"Yarn"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"http://yarnpkg.com",children:"Yarn"}),"\u662f Facebook \u63d0\u4f9b\u7684\u66ff\u4ee3 npm \u7684\u5de5\u5177\uff0c\u53ef\u4ee5\u52a0\u901f node \u6a21\u5757\u7684\u4e0b\u8f7d\u3002"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:"npm install -g yarn\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u5b89\u88c5\u5b8c yarn \u4e4b\u540e\u5c31\u53ef\u4ee5\u7528 yarn \u4ee3\u66ff npm \u4e86\uff0c\u4f8b\u5982\u7528",(0,i.jsx)(n.code,{children:"yarn"}),"\u4ee3\u66ff",(0,i.jsx)(n.code,{children:"npm install"}),"\u547d\u4ee4\uff0c\u7528",(0,i.jsx)(n.code,{children:"yarn add \u67d0\u7b2c\u4e09\u65b9\u5e93\u540d"}),"\u4ee3\u66ff",(0,i.jsx)(n.code,{children:"npm install \u67d0\u7b2c\u4e09\u65b9\u5e93\u540d"}),"\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"java-development-kit",children:"Java Development Kit"}),"\n",(0,i.jsxs)(n.p,{children:["\u6211\u4eec\u63a8\u8350\u4f7f\u7528",(0,i.jsx)(n.a,{href:"http://brew.sh/",children:"Homebrew"}),"\u6765\u5b89\u88c5\u7531 Azul \u63d0\u4f9b\u7684 \u540d\u4e3a ",(0,i.jsx)(n.strong,{children:"Zulu"})," \u7684 OpenJDK \u53d1\u884c\u7248\u3002\u6b64\u53d1\u884c\u7248",(0,i.jsx)(n.strong,{children:"\u540c\u65f6\u4e3a Intel \u548c M1 \u82af\u7247\u63d0\u4f9b\u652f\u6301"}),"\u3002\u5728 M1 \u82af\u7247\u67b6\u6784\u7684 Mac \u4e0a\u76f8\u6bd4\u5176\u4ed6 JDK \u5728\u7f16\u8bd1\u65f6\u6709\u660e\u663e\u7684\u6027\u80fd\u4f18\u52bf\u3002"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"brew install --cask zulu@17\n\n# Get path to where cask was installed to double-click installer\nbrew info --cask zulu@17\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u5b89\u88c5 JDK \u540e\uff0c\u8bf7\u66f4\u65b0 ",(0,i.jsx)(n.code,{children:"JAVA_HOME"})," \u73af\u5883\u53d8\u91cf\u3002\u5982\u679c\u4f60\u662f\u6309\u7167\u4e0a\u8ff0\u6b65\u9aa4\u64cd\u4f5c\uff0cJDK \u5f88\u53ef\u80fd\u4f4d\u4e8e ",(0,i.jsx)(n.code,{children:"/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home"})]}),"\n",(0,i.jsxs)(n.p,{children:["React Native \u5f53\u524d\u9700\u8981 Java Development Kit [JDK] 17\uff0c\u4e0d\u5efa\u8bae\u4f7f\u7528\u66f4\u9ad8\u7248\u672c\u6216\u66f4\u4f4e\u7248\u672c\uff0c\u53ef\u80fd\u4f1a\u78b0\u5230\u95ee\u9898\u3002\u4f60\u53ef\u4ee5\u5728\u547d\u4ee4\u884c\u4e2d\u8f93\u5165\n",(0,i.jsx)(n.code,{children:"javac -version"}),"\uff08\u8bf7\u6ce8\u610f\u662f javac\uff0c\u4e0d\u662f java\uff09\u6765\u67e5\u770b\u4f60\u5f53\u524d\u5b89\u88c5\u7684 JDK \u7248\u672c\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u4f4e\u4e8e 0.73 \u7248\u672c\u7684 React Native \u9700\u8981 JDK 11 \u7248\u672c\uff0c\u800c\u4f4e\u4e8e 0.67 \u7684\u9700\u8981 JDK 8 \u7248\u672c\u3002"}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"android-\u5f00\u53d1\u73af\u5883",children:"Android \u5f00\u53d1\u73af\u5883"}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u4e4b\u524d\u6ca1\u6709\u63a5\u89e6\u8fc7 Android \u7684\u5f00\u53d1\u73af\u5883\uff0c\u90a3\u4e48\u8bf7\u505a\u597d\u5fc3\u7406\u51c6\u5907\uff0c\u8fd9\u4e00\u8fc7\u7a0b\u76f8\u5f53\u7e41\u7410\u3002\u8bf7",(0,i.jsx)(n.code,{children:"\u4e07\u5206\u4ed4\u7ec6"}),"\u5730\u9605\u8bfb\u4e0b\u9762\u7684\u8bf4\u660e\uff0c\u4e25\u683c\u5bf9\u7167\u6587\u6863\u8fdb\u884c\u914d\u7f6e\u64cd\u4f5c\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u8bd1\u6ce8\uff1a\u8bf7\u6ce8\u610f\uff01\uff01\uff01\u56fd\u5185\u7528\u6237",(0,i.jsx)(n.code,{children:"\u5fc5\u987b\u5fc5\u987b\u5fc5\u987b"}),"\u6709\u7a33\u5b9a\u7684\u4ee3\u7406\u8f6f\u4ef6\uff0c\u5426\u5219\u5728\u4e0b\u8f7d\u3001\u5b89\u88c5\u3001\u914d\u7f6e\u8fc7\u7a0b\u4e2d\u4f1a\u4e0d\u65ad\u906d\u9047\u94fe\u63a5\u8d85\u65f6\u6216\u65ad\u5f00\uff0c\u65e0\u6cd5\u8fdb\u884c\u5f00\u53d1\u5de5\u4f5c\u3002\u67d0\u4e9b\u4ee3\u7406\u8f6f\u4ef6\u53ef\u80fd\u53ea\u63d0\u4f9b\u6d4f\u89c8\u5668\u7684\u4ee3\u7406\u529f\u80fd\uff0c\u6216\u53ea\u9488\u5bf9\u7279\u5b9a\u7f51\u7ad9\u4ee3\u7406\u7b49\u7b49\uff0c\u8bf7\u81ea\u884c\u7814\u7a76\u914d\u7f6e\u6216\u66f4\u6362\u5176\u4ed6\u8f6f\u4ef6\u3002\u603b\u4e4b\u5982\u679c\u62a5\u9519\u4e2d\u51fa\u73b0\u6709\u7f51\u5740\uff0c\u90a3\u5c31\u662f\u56e0\u4e3a\u94fe\u63a5\u6e90\u4ed3\u5e93\u7684\u7f51\u7edc\u94fe\u63a5\u88ab\u963b\u65ad\u4e86\uff0c\u8fd9\u4e00\u963b\u65ad\u73b0\u8c61\u53ef\u80fd\u56e0\u65f6\u95f4\u3001\u5730\u533a\u3001\u8fd0\u8425\u5546\u800c\u4e0d\u540c\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u4e5f\u53ef\u4ee5\u5c1d\u8bd5\u53c2\u8003\u8fd9\u91cc\u7684\u505a\u6cd5",(0,i.jsx)(n.a,{href:"https://github.com/scwang90/SmartRefreshLayout/issues/1376#issuecomment-938422964",children:"\u8bbe\u7f6e\u963f\u91cc\u4e91\u7684 maven \u955c\u50cf\u6e90"}),"\uff0c\u4f46\u8fd9\u4e2a\u505a\u6cd5\u53ef\u80fd\u968f gradle \u6216\u8005 rn \u7248\u672c\u7684\u4e0d\u540c\u800c\u5931\u6548\u3002"]}),"\n"]}),"\n",(0,i.jsx)("h4",{id:"android-studio",children:"1. \u5b89\u88c5 Android Studio"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://developer.android.google.cn/studio/",children:"\u9996\u5148\u4e0b\u8f7d\u548c\u5b89\u88c5 Android Studio"}),'\uff0c\u56fd\u5185\u7528\u6237\u53ef\u80fd\u65e0\u6cd5\u6253\u5f00\u5b98\u65b9\u94fe\u63a5\uff0c\u8bf7\u81ea\u884c\u4f7f\u7528\u641c\u7d22\u5f15\u64ce\u641c\u7d22\u53ef\u7528\u7684\u4e0b\u8f7d\u94fe\u63a5\u3002\u5b89\u88c5\u754c\u9762\u4e2d\u9009\u62e9"Custom"\u9009\u9879\uff0c\u786e\u4fdd\u9009\u4e2d\u4e86\u4ee5\u4e0b\u51e0\u9879\uff1a']}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"Android SDK"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"Android SDK Platform"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"Android Virtual Device"})}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:'\u7136\u540e\u70b9\u51fb"Next"\u6765\u5b89\u88c5\u9009\u4e2d\u7684\u7ec4\u4ef6\u3002'}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u5982\u679c\u9009\u62e9\u6846\u662f\u7070\u7684\uff0c\u4f60\u4e5f\u53ef\u4ee5\u5148\u8df3\u8fc7\uff0c\u7a0d\u540e\u518d\u6765\u5b89\u88c5\u8fd9\u4e9b\u7ec4\u4ef6\u3002"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u770b\u5230\u6b22\u8fce\u754c\u9762\u65f6\uff0c\u5c31\u53ef\u4ee5\u8fdb\u884c\u4e0b\u9762\u7684\u64cd\u4f5c\u4e86\u3002"}),"\n",(0,i.jsx)("h4",{id:"android-sdk",children:"2. \u5b89\u88c5 Android SDK"}),"\n",(0,i.jsxs)(n.p,{children:["Android Studio \u9ed8\u8ba4\u4f1a\u5b89\u88c5\u6700\u65b0\u7248\u672c\u7684 Android SDK\u3002\u76ee\u524d\u7f16\u8bd1 React Native \u5e94\u7528\u9700\u8981\u7684\u662f",(0,i.jsx)(n.code,{children:"Android 14 (UpsideDownCake)"}),"\u7248\u672c\u7684 SDK\uff08\u6ce8\u610f SDK \u7248\u672c\u4e0d\u7b49\u4e8e\u7ec8\u7aef\u7cfb\u7edf\u7248\u672c\uff0cRN \u76ee\u524d\u652f\u6301 android 6 \u4ee5\u4e0a\u8bbe\u5907\uff09\u3002\u4f60\u53ef\u4ee5\u5728 Android Studio \u7684 SDK Manager \u4e2d\u9009\u62e9\u5b89\u88c5\u5404\u7248\u672c\u7684 SDK\u3002"]}),"\n",(0,i.jsx)(n.p,{children:'\u4f60\u53ef\u4ee5\u5728 Android Studio \u7684\u6b22\u8fce\u754c\u9762\u4e2d\u627e\u5230 SDK Manager\u3002\u70b9\u51fb"Configure"\uff0c\u7136\u540e\u5c31\u80fd\u770b\u5230"SDK Manager"\u3002'}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Android Studio Welcome",src:r(47985).Z+"",width:"704",height:"550"})}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:['SDK Manager \u8fd8\u53ef\u4ee5\u5728 Android Studio \u7684"Preferences"\u83dc\u5355\u4e2d\u627e\u5230\u3002\u5177\u4f53\u8def\u5f84\u662f',(0,i.jsx)(n.strong,{children:"Appearance & Behavior"})," \u2192 ",(0,i.jsx)(n.strong,{children:"System Settings"})," \u2192 ",(0,i.jsx)(n.strong,{children:"Android SDK"}),"\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:['\u5728 SDK Manager \u4e2d\u9009\u62e9"SDK Platforms"\u9009\u9879\u5361\uff0c\u7136\u540e\u5728\u53f3\u4e0b\u89d2\u52fe\u9009"Show Package Details"\u3002\u5c55\u5f00',(0,i.jsx)(n.code,{children:"Android 14 (UpsideDownCake)"}),"\u9009\u9879\uff0c\u786e\u4fdd\u52fe\u9009\u4e86\u4e0b\u9762\u8fd9\u4e9b\u7ec4\u4ef6\uff08\u5982\u679c\u770b\u4e0d\u5230\u8fd9\u4e2a\u754c\u9762\uff0c\u5219\u9700\u8981\u4f7f\u7528\u7a33\u5b9a\u7684\u4ee3\u7406\u8f6f\u4ef6\uff09\uff1a"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"Android SDK Platform 34"})}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"Intel x86 Atom_64 System Image"}),"\uff08\u5b98\u65b9\u6a21\u62df\u5668\u955c\u50cf\u6587\u4ef6\uff0c\u4f7f\u7528\u975e\u5b98\u65b9\u6a21\u62df\u5668\u4e0d\u9700\u8981\u5b89\u88c5\u6b64\u7ec4\u4ef6\uff09\u6216\u662f",(0,i.jsx)(n.code,{children:"Google APIs ARM 64 v8a System Image"}),"\uff08\u9488\u5bf9 Apple Silicon \u7cfb\u5217\u673a\u578b\uff09"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:['\u7136\u540e\u70b9\u51fb"SDK Tools"\u9009\u9879\u5361\uff0c\u540c\u6837\u52fe\u4e2d\u53f3\u4e0b\u89d2\u7684"Show Package Details"\u3002\u5c55\u5f00"Android SDK Build-Tools"\u9009\u9879\uff0c\u786e\u4fdd\u9009\u4e2d\u4e86 React Native \u6240\u5fc5\u987b\u7684',(0,i.jsx)(n.code,{children:"34.0.0"}),"\u7248\u672c\u3002\u4f60\u53ef\u4ee5\u540c\u65f6\u5b89\u88c5\u591a\u4e2a\u5176\u4ed6\u7248\u672c\u3002"]}),"\n",(0,i.jsx)(n.p,{children:'\u70b9\u51fb"Apply"\u6765\u4e0b\u8f7d\u548c\u5b89\u88c5\u9009\u4e2d\u7684\u8fd9\u4e9b\u7ec4\u4ef6\u3002'}),"\n",(0,i.jsx)(n.h4,{id:"3-\u914d\u7f6e-android_home-\u73af\u5883\u53d8\u91cf",children:"3. \u914d\u7f6e ANDROID_HOME \u73af\u5883\u53d8\u91cf"}),"\n",(0,i.jsx)(n.p,{children:"React Native \u9700\u8981\u901a\u8fc7\u73af\u5883\u53d8\u91cf\u6765\u4e86\u89e3\u4f60\u7684 Android SDK \u88c5\u5728\u4ec0\u4e48\u8def\u5f84\uff0c\u4ece\u800c\u6b63\u5e38\u8fdb\u884c\u7f16\u8bd1\u3002"}),"\n",(0,i.jsxs)(n.p,{children:["\u5177\u4f53\u7684\u505a\u6cd5\u662f\u628a\u4e0b\u9762\u7684\u547d\u4ee4\u52a0\u5165\u5230 shell \u7684\u914d\u7f6e\u6587\u4ef6\u4e2d\u3002\u5982\u679c\u4f60\u7684 shell \u662f zsh\uff0c\u5219\u914d\u7f6e\u6587\u4ef6\u4e3a",(0,i.jsx)(n.code,{children:"~/.zshrc"}),"\uff0c\u5982\u679c\u662f bash \u5219\u4e3a",(0,i.jsx)(n.code,{children:"~/.bash_profile"}),"\uff08\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"echo $0"}),"\u547d\u4ee4\u67e5\u770b\u4f60\u6240\u4f7f\u7528\u7684 shell\u3002\uff09\uff1a"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"# \u5982\u679c\u4f60\u4e0d\u662f\u901a\u8fc7Android Studio\u5b89\u88c5\u7684sdk\uff0c\u5219\u5176\u8def\u5f84\u53ef\u80fd\u4e0d\u540c\uff0c\u8bf7\u81ea\u884c\u786e\u5b9a\u6e05\u695a\nexport ANDROID_HOME=$HOME/Library/Android/sdk\nexport PATH=$PATH:$ANDROID_HOME/emulator\nexport PATH=$PATH:$ANDROID_HOME/platform-tools\n"})}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u8bd1\u6ce8\uff1a~\u8868\u793a\u7528\u6237\u76ee\u5f55\uff0c\u5373",(0,i.jsx)(n.code,{children:"/Users/\u4f60\u7684\u7528\u6237\u540d/"}),"\uff0c\u800c\u5c0f\u6570\u70b9\u5f00\u5934\u7684\u6587\u4ef6\u5728 Finder \u4e2d\u662f\u9690\u85cf\u7684\uff0c\u5e76\u4e14\u8fd9\u4e2a\u6587\u4ef6\u6709\u53ef\u80fd\u5e76\u4e0d\u5b58\u5728\u3002\u53ef\u5728\u7ec8\u7aef\u4e0b\u4f7f\u7528",(0,i.jsx)(n.code,{children:"vi ~/.zshrc"}),"\u547d\u4ee4\u521b\u5efa\u6216\u7f16\u8f91\u3002\u5982\u4e0d\u719f\u6089 vi \u64cd\u4f5c\uff0c\u8bf7\u70b9\u51fb",(0,i.jsx)(n.a,{href:"http://www.eepw.com.cn/article/48018.htm",children:"\u8fd9\u91cc"}),"\u5b66\u4e60\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["\u4f7f\u7528",(0,i.jsx)(n.code,{children:"source $HOME/.zshrc"}),"\u547d\u4ee4\u6765\u4f7f\u73af\u5883\u53d8\u91cf\u8bbe\u7f6e\u7acb\u5373\u751f\u6548\uff08\u5426\u5219\u91cd\u542f\u540e\u624d\u751f\u6548\uff09\u3002\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"echo $ANDROID_HOME"}),"\u68c0\u67e5\u6b64\u53d8\u91cf\u662f\u5426\u5df2\u6b63\u786e\u8bbe\u7f6e\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:['\u8bf7\u786e\u4fdd\u4f60\u6b63\u786e\u6307\u5b9a\u4e86 Android SDK \u8def\u5f84\u3002\u4f60\u53ef\u4ee5\u5728 Android Studio \u7684"Preferences"\u83dc\u5355\u4e2d\u67e5\u770b SDK \u7684\u771f\u5b9e\u8def\u5f84\uff0c\u5177\u4f53\u662f',(0,i.jsx)(n.strong,{children:"Appearance & Behavior"})," \u2192 ",(0,i.jsx)(n.strong,{children:"System Settings"})," \u2192 ",(0,i.jsx)(n.strong,{children:"Android SDK"}),"\u3002"]}),"\n"]}),"\n",(0,i.jsx)("h2",{children:"\u521b\u5efa\u65b0\u9879\u76ee"}),"\n",(0,i.jsx)(o.ZP,{}),"\n",(0,i.jsxs)(n.p,{children:['\u4f7f\u7528 React Native \u5185\u5efa\u7684\u547d\u4ee4\u884c\u5de5\u5177\u6765\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a"AwesomeProject"\u7684\u65b0\u9879\u76ee\u3002\u8fd9\u4e2a\u547d\u4ee4\u884c\u5de5\u5177\u4e0d\u9700\u8981\u5b89\u88c5\uff0c\u53ef\u4ee5\u76f4\u63a5\u7528 node \u81ea\u5e26\u7684',(0,i.jsx)(n.code,{children:"npx"}),"\u547d\u4ee4\u6765\u4f7f\u7528\uff1a"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"\u5fc5\u987b\u8981\u770b\u7684\u6ce8\u610f\u4e8b\u9879"}),"\uff1a\u8bf7",(0,i.jsx)(n.code,{children:"\u4e0d\u8981"}),"\u5355\u72ec\u4f7f\u7528\u5e38\u89c1\u7684\u5173\u952e\u5b57\u4f5c\u4e3a\u9879\u76ee\u540d\uff08\u5982 class, native, new, package \u7b49\u7b49\uff09\u3002\u8bf7",(0,i.jsx)(n.code,{children:"\u4e0d\u8981"}),"\u4f7f\u7528\u4e0e\u6838\u5fc3\u6a21\u5757\u540c\u540d\u7684\u9879\u76ee\u540d\uff08\u5982 react, react-native \u7b49\uff09\u3002\u8bf7",(0,i.jsx)(n.code,{children:"\u4e0d\u8981"}),"\u5728\u76ee\u5f55\u3001\u6587\u4ef6\u540d\u4e2d\u4f7f\u7528\u4e2d\u6587\u3001\u7a7a\u683c\u7b49\u7279\u6b8a\u7b26\u53f7\u3002"]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npx react-native@latest init AwesomeProject\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u662f\u60f3\u628a React Native \u96c6\u6210\u5230\u73b0\u6709\u7684\u539f\u751f\u9879\u76ee\u4e2d\uff0c\u5219\u6b65\u9aa4\u5b8c\u5168\u4e0d\u540c\uff0c\u8bf7\u53c2\u8003",(0,i.jsx)(n.a,{href:"/docs/next/integration-with-existing-apps",children:"\u96c6\u6210\u5230\u73b0\u6709\u539f\u751f\u5e94\u7528"}),"\u3002"]}),"\n",(0,i.jsx)("h3",{children:"[\u53ef\u9009\u53c2\u6570] \u6307\u5b9a\u7248\u672c\u6216\u9879\u76ee\u6a21\u677f"}),"\n",(0,i.jsxs)(n.p,{children:["\u4f60\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"--version"}),"\u53c2\u6570\uff08\u6ce8\u610f\u662f",(0,i.jsx)(n.code,{children:"\u4e24"}),"\u4e2a\u6760\uff09\u521b\u5efa\u6307\u5b9a\u7248\u672c\u7684\u9879\u76ee\u3002\u4f8b\u5982\uff1a"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npx react-native@X.XX.X init AwesomeProject --version X.XX.X\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u8fd8\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"--template"}),"\u53c2\u6570\u6765\u4f7f\u7528\u4e00\u4e9b\u793e\u533a\u63d0\u4f9b\u7684\u6a21\u677f\u3002"]}),"\n",(0,i.jsx)(n.h2,{id:"\u51c6\u5907-android-\u8bbe\u5907",children:"\u51c6\u5907 Android \u8bbe\u5907"}),"\n",(0,i.jsxs)(n.p,{children:["\u4f60\u9700\u8981\u51c6\u5907\u4e00\u53f0 Android \u8bbe\u5907\u6765\u8fd0\u884c React Native Android \u5e94\u7528\u3002\u8fd9\u91cc\u6240\u6307\u7684\u8bbe\u5907\u65e2\u53ef\u4ee5\u662f\u771f\u673a\uff0c\u4e5f\u53ef\u4ee5\u662f\u6a21\u62df\u5668\u3002\u540e\u9762\u6211\u4eec\u6240\u6709\u7684\u6587\u6863\u9664\u975e\u7279\u522b\u8bf4\u660e\uff0c\u5e76\u4e0d\u533a\u5206\u771f\u673a\u6216\u8005\u6a21\u62df\u5668\u3002Android \u5b98\u65b9\u63d0\u4f9b\u4e86\u540d\u4e3a Android Virtual Device\uff08\u7b80\u79f0 AVD\uff09\u7684\u6a21\u62df\u5668\u3002\u6b64\u5916\u8fd8\u6709\u5f88\u591a\u7b2c\u4e09\u65b9\u63d0\u4f9b\u7684\u6a21\u62df\u5668\u5982",(0,i.jsx)(n.a,{href:"https://www.genymotion.com/download",children:"Genymotion"}),"\u3001BlueStack \u7b49\u3002\u4e00\u822c\u6765\u8bf4\u5b98\u65b9\u6a21\u62df\u5668\u514d\u8d39\u3001\u529f\u80fd\u5b8c\u6574\uff0c\u4f46\u6027\u80fd\u8f83\u5dee\u3002\u7b2c\u4e09\u65b9\u6a21\u62df\u5668\u6027\u80fd\u8f83\u597d\uff0c\u4f46\u53ef\u80fd\u9700\u8981\u4ed8\u8d39\uff0c\u6216\u5e26\u6709\u5e7f\u544a\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"\u4f7f\u7528-android-\u771f\u673a",children:"\u4f7f\u7528 Android \u771f\u673a"}),"\n",(0,i.jsxs)(n.p,{children:["\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528 Android \u771f\u673a\u6765\u4ee3\u66ff\u6a21\u62df\u5668\u8fdb\u884c\u5f00\u53d1\uff0c\u53ea\u9700\u7528 usb \u6570\u636e\u7ebf\u8fde\u63a5\u5230\u7535\u8111\uff0c\u7136\u540e\u9075\u7167",(0,i.jsx)(n.a,{href:"/docs/next/running-on-device",children:"\u5728\u8bbe\u5907\u4e0a\u8fd0\u884c"}),"\u8fd9\u7bc7\u6587\u6863\u7684\u8bf4\u660e\u64cd\u4f5c\u5373\u53ef\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"\u4f7f\u7528-android-\u6a21\u62df\u5668",children:"\u4f7f\u7528 Android \u6a21\u62df\u5668"}),"\n",(0,i.jsx)(n.p,{children:'\u4f60\u53ef\u4ee5\u4f7f\u7528 Android Studio \u6253\u5f00\u9879\u76ee\u4e0b\u7684"android"\u76ee\u5f55\uff0c\u7136\u540e\u53ef\u4ee5\u4f7f\u7528"AVD Manager"\u6765\u67e5\u770b\u53ef\u7528\u7684\u865a\u62df\u8bbe\u5907\uff0c\u5b83\u7684\u56fe\u6807\u770b\u8d77\u6765\u50cf\u4e0b\u9762\u8fd9\u6837\uff1a'}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Android Studio AVD Manager",src:r(13488).Z+"",width:"29",height:"25"})}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u521a\u521a\u624d\u5b89\u88c5 Android Studio\uff0c\u90a3\u4e48\u53ef\u80fd\u9700\u8981\u5148",(0,i.jsx)(n.a,{href:"https://developer.android.com/studio/run/managing-avds.html",children:"\u521b\u5efa\u4e00\u4e2a\u865a\u62df\u8bbe\u5907"}),'\u3002\u70b9\u51fb"Create Virtual Device..."\uff0c\u7136\u540e\u9009\u62e9\u6240\u9700\u7684\u8bbe\u5907\u7c7b\u578b\u5e76\u70b9\u51fb"Next"\uff0c\u7136\u540e\u9009\u62e9',(0,i.jsx)(n.strong,{children:"Tiramisu"})," API Level 33 image."]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u8bd1\u6ce8\uff1a\u8bf7\u4e0d\u8981\u8f7b\u6613\u70b9\u51fb Android Studio \u4e2d\u53ef\u80fd\u5f39\u51fa\u7684\u5efa\u8bae\u66f4\u65b0\u9879\u76ee\u4e2d\u67d0\u4f9d\u8d56\u9879\u7684\u5efa\u8bae\uff0c\u5426\u5219\u53ef\u80fd\u5bfc\u81f4\u65e0\u6cd5\u8fd0\u884c\u3002"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"\u7f16\u8bd1\u5e76\u8fd0\u884c-react-native-\u5e94\u7528",children:"\u7f16\u8bd1\u5e76\u8fd0\u884c React Native \u5e94\u7528"}),"\n",(0,i.jsxs)(n.p,{children:["\u786e\u4fdd\u4f60\u5148\u8fd0\u884c\u4e86\u6a21\u62df\u5668\u6216\u8005\u8fde\u63a5\u4e86\u771f\u673a\uff0c\u7136\u540e\u5728\u4f60\u7684\u9879\u76ee\u76ee\u5f55\u4e2d\u8fd0\u884c",(0,i.jsx)(n.code,{children:"yarn android"}),"\u6216\u8005",(0,i.jsx)(n.code,{children:"yarn react-native run-android"}),"\uff1a"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:"cd AwesomeProject\nyarn android\n# \u6216\u8005\nyarn react-native run-android\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u6b64\u547d\u4ee4\u4f1a\u5bf9\u9879\u76ee\u7684\u539f\u751f\u90e8\u5206\u8fdb\u884c\u7f16\u8bd1\uff0c\u540c\u65f6\u5728\u53e6\u5916\u4e00\u4e2a\u547d\u4ee4\u884c\u4e2d\u542f\u52a8",(0,i.jsx)(n.code,{children:"Metro"}),"\u670d\u52a1\u5bf9 js \u4ee3\u7801\u8fdb\u884c\u5b9e\u65f6\u6253\u5305\u5904\u7406\uff08\u7c7b\u4f3c webpack\uff09\u3002",(0,i.jsx)(n.code,{children:"Metro"}),"\u670d\u52a1\u4e5f\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"yarn start"}),"\u547d\u4ee4\u5355\u72ec\u542f\u52a8\u3002"]}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u914d\u7f6e\u6ca1\u6709\u95ee\u9898\uff0c\u4f60\u5e94\u8be5\u53ef\u4ee5\u770b\u5230\u5e94\u7528\u81ea\u52a8\u5b89\u88c5\u5230\u8bbe\u5907\u4e0a\u5e76\u5f00\u59cb\u8fd0\u884c\u3002\u6ce8\u610f\u7b2c\u4e00\u6b21\u8fd0\u884c\u65f6\u9700\u8981\u4e0b\u8f7d\u5927\u91cf\u7f16\u8bd1\u4f9d\u8d56\uff0c\u8017\u65f6\u53ef\u80fd\u6570\u5341\u5206\u949f\u3002\u6b64\u8fc7\u7a0b",(0,i.jsx)(n.code,{children:"\u4e25\u91cd\u4f9d\u8d56\u7a33\u5b9a\u7684\u4ee3\u7406\u8f6f\u4ef6"}),"\uff0c\u5426\u5219\u5c06\u9891\u7e41\u906d\u9047\u94fe\u63a5\u8d85\u65f6\u548c\u65ad\u5f00\uff0c\u5bfc\u81f4\u65e0\u6cd5\u8fd0\u884c\u3002"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"npx react-native run-android"}),"\u53ea\u662f\u8fd0\u884c\u5e94\u7528\u7684\u65b9\u5f0f\u4e4b\u4e00\u3002\u4f60\u4e5f\u53ef\u4ee5\u5728 Android Studio \u4e2d\u76f4\u63a5\u8fd0\u884c\u5e94\u7528\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u8bd1\u6ce8\uff1a\u5efa\u8bae\u5728",(0,i.jsx)(n.code,{children:"run-android"}),"\u6210\u529f\u540e\u518d\u5c1d\u8bd5\u4f7f\u7528 Android Studio \u542f\u52a8\u3002\u8bf7\u4e0d\u8981\u8f7b\u6613\u70b9\u51fb Android Studio \u4e2d\u53ef\u80fd\u5f39\u51fa\u7684\u5efa\u8bae\u66f4\u65b0\u9879\u76ee\u4e2d\u67d0\u4f9d\u8d56\u9879\u7684\u5efa\u8bae\uff0c\u5426\u5219\u53ef\u80fd\u5bfc\u81f4\u65e0\u6cd5\u8fd0\u884c\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u65e0\u6cd5\u6b63\u5e38\u8fd0\u884c\uff0c\u9047\u5230\u5947\u5947\u602a\u602a\u7684\u7ea2\u5c4f\u9519\u8bef\uff0c\u5148\u56de\u5934",(0,i.jsx)(n.code,{children:"\u4ed4\u7ec6\u5bf9\u7167\u6587\u6863\u68c0\u67e5"}),"\uff0c\u7136\u540e\u53ef\u4ee5\u770b\u770b",(0,i.jsx)(n.a,{href:"https://github.com/reactnativecn/react-native-website/issues",children:"\u95ee\u9898\u8ba8\u8bba\u533a"}),"\u3002\u4e0d\u540c\u65f6\u671f\u4e0d\u540c\u7248\u672c\u53ef\u80fd\u4f1a\u78b0\u5230\u4e0d\u540c\u7684\u95ee\u9898\uff0c\u6211\u4eec\u4f1a\u5728\u8bba\u575b\u4e2d\u53ca\u65f6\u89e3\u7b54\u66f4\u65b0\u3002\u4f46\u8bf7\u6ce8\u610f",(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.em,{children:"\u5343\u4e07\u4e0d\u8981"})}),"\u6267\u884c bundle \u547d\u4ee4\uff0c\u90a3\u6837\u4f1a\u5bfc\u81f4\u4ee3\u7801\u5b8c\u5168\u65e0\u6cd5\u5237\u65b0\u3002"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"\u4fee\u6539\u9879\u76ee",children:"\u4fee\u6539\u9879\u76ee"}),"\n",(0,i.jsx)(n.p,{children:"\u73b0\u5728\u4f60\u5df2\u7ecf\u6210\u529f\u8fd0\u884c\u4e86\u9879\u76ee\uff0c\u6211\u4eec\u53ef\u4ee5\u5f00\u59cb\u5c1d\u8bd5\u52a8\u624b\u6539\u4e00\u6539\u4e86\uff1a"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\u4f7f\u7528\u4f60\u559c\u6b22\u7684\u6587\u672c\u7f16\u8f91\u5668\u6253\u5f00",(0,i.jsx)(n.code,{children:"App.js"}),"\u5e76\u968f\u4fbf\u6539\u4e0a\u51e0\u884c"]}),"\n",(0,i.jsxs)(n.li,{children:["\u6309\u4e24\u4e0b R \u952e\uff0c\u6216\u662f\u5728\u5f00\u53d1\u8005\u83dc\u5355\u4e2d\u9009\u62e9 ",(0,i.jsx)(n.em,{children:"Reload"}),"\uff0c\u5c31\u53ef\u4ee5\u770b\u5230\u4f60\u7684\u6700\u65b0\u4fee\u6539\u3002"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"\u5b8c\u6210\u4e86",children:"\u5b8c\u6210\u4e86\uff01"}),"\n",(0,i.jsx)(n.p,{children:"\u606d\u559c\uff01\u4f60\u5df2\u7ecf\u6210\u529f\u8fd0\u884c\u5e76\u4fee\u6539\u4e86\u4f60\u7684\u7b2c\u4e00\u4e2a React Native \u5e94\u7528"}),"\n",(0,i.jsx)("center",{children:(0,i.jsx)("img",{src:"https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/GettingStartedCongratulations.png",width:"150"})}),"\n",(0,i.jsx)(n.h2,{id:"\u63a5\u4e0b\u6765",children:"\u63a5\u4e0b\u6765\uff1f"}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u60f3\u628a React Native \u96c6\u6210\u5230\u73b0\u6709\u7684\u539f\u751f\u9879\u76ee\u4e2d\uff0c\u5219\u8bf7\u53c2\u8003",(0,i.jsx)(n.a,{href:"/docs/next/integration-with-existing-apps",children:"\u96c6\u6210\u5230\u73b0\u6709\u539f\u751f\u5e94\u7528"}),"\u3002"]}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u60f3\u4ece\u5934\u5f00\u59cb\u5b66\u4e60 React Native \u5f00\u53d1\uff0c\u53ef\u4ee5\u4ece",(0,i.jsx)(n.a,{href:"/docs/next/environment-setup",children:"\u7b80\u4ecb"}),"\u6587\u6863\u5f00\u59cb\u3002"]})]})}function p(e={}){const{wrapper:n}={...(0,d.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(j,{...e})}):j(e)}const u=[{value:"\u5b89\u88c5\u4f9d\u8d56",id:"\u5b89\u88c5\u4f9d\u8d56",level:2},{value:"Node, JDK",id:"node-jdk",level:3},{value:"Yarn",id:"yarn",level:3},{value:"Android \u5f00\u53d1\u73af\u5883",id:"android-\u5f00\u53d1\u73af\u5883",level:3},{value:"1. \u5b89\u88c5 Android Studio",id:"1-\u5b89\u88c5-android-studio",level:4},{value:"2. \u5b89\u88c5 Android SDK",id:"2-\u5b89\u88c5-android-sdk",level:4},{value:"3. \u914d\u7f6e ANDROID_HOME \u73af\u5883\u53d8\u91cf",id:"3-\u914d\u7f6e-android_home-\u73af\u5883\u53d8\u91cf",level:4},{value:"4. \u628a\u5de5\u5177\u76ee\u5f55\u6dfb\u52a0\u5230\u73af\u5883\u53d8\u91cf Path",id:"4-\u628a\u5de5\u5177\u76ee\u5f55\u6dfb\u52a0\u5230\u73af\u5883\u53d8\u91cf-path",level:4},{value:"\u521b\u5efa\u65b0\u9879\u76ee",id:"\u521b\u5efa\u65b0\u9879\u76ee",level:2},...o.d$,{value:"[\u53ef\u9009\u53c2\u6570] \u6307\u5b9a\u7248\u672c\u6216\u9879\u76ee\u6a21\u677f",id:"\u53ef\u9009\u53c2\u6570-\u6307\u5b9a\u7248\u672c\u6216\u9879\u76ee\u6a21\u677f",level:3},{value:"\u51c6\u5907 Android \u8bbe\u5907",id:"\u51c6\u5907-android-\u8bbe\u5907",level:2},{value:"\u4f7f\u7528 Android \u771f\u673a",id:"\u4f7f\u7528-android-\u771f\u673a",level:3},{value:"\u4f7f\u7528 Android \u6a21\u62df\u5668",id:"\u4f7f\u7528-android-\u6a21\u62df\u5668",level:3},{value:"\u7f16\u8bd1\u5e76\u8fd0\u884c React Native \u5e94\u7528",id:"\u7f16\u8bd1\u5e76\u8fd0\u884c-react-native-\u5e94\u7528",level:2},{value:"\u4fee\u6539\u9879\u76ee",id:"\u4fee\u6539\u9879\u76ee",level:3},{value:"\u5b8c\u6210\u4e86\uff01",id:"\u5b8c\u6210\u4e86",level:3},{value:"\u63a5\u4e0b\u6765\uff1f",id:"\u63a5\u4e0b\u6765",level:2}];function v(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,d.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h2,{id:"\u5b89\u88c5\u4f9d\u8d56",children:"\u5b89\u88c5\u4f9d\u8d56"}),"\n",(0,i.jsx)(n.p,{children:"\u5fc5\u987b\u5b89\u88c5\u7684\u4f9d\u8d56\u6709\uff1aNode\u3001JDK \u548c Android Studio\u3002"}),"\n",(0,i.jsxs)(n.p,{children:["\u867d\u7136\u4f60\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"\u4efb\u4f55\u7f16\u8f91\u5668"}),"\u6765\u5f00\u53d1\u5e94\u7528\uff08\u7f16\u5199 js \u4ee3\u7801\uff09\uff0c\u4f46\u4f60\u4ecd\u7136\u5fc5\u987b\u5b89\u88c5 Android Studio \u6765\u83b7\u5f97\u7f16\u8bd1 Android \u5e94\u7528\u6240\u9700\u7684\u5de5\u5177\u548c\u73af\u5883\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"node-jdk",children:"Node, JDK"}),"\n",(0,i.jsxs)(n.p,{children:["\u6211\u4eec\u5efa\u8bae\u76f4\u63a5\u4f7f\u7528\u641c\u7d22\u5f15\u64ce\u641c\u7d22\u4e0b\u8f7d Node \u548c",(0,i.jsx)(n.a,{href:"https://www.oracle.com/java/technologies/downloads/#java17",children:"Java SE Development Kit (JDK)"})]}),"\n",(0,i.jsx)(n.p,{children:"\u6ce8\u610f Node \u7684\u7248\u672c\u5e94\u5927\u4e8e\u7b49\u4e8e 18\uff0c\u5b89\u88c5\u5b8c Node \u540e\u5efa\u8bae\u8bbe\u7f6e npm \u955c\u50cf\uff08\u6dd8\u5b9d\u6e90\uff09\u4ee5\u52a0\u901f\u540e\u9762\u7684\u8fc7\u7a0b\uff08\u6216\u4f7f\u7528\u79d1\u5b66\u4e0a\u7f51\u5de5\u5177\uff09\u3002"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u6ce8\u610f\uff1a\u5f3a\u70c8\u5efa\u8bae\u59cb\u7ec8\u9009\u62e9 Node \u5f53\u524d\u7684 LTS \uff08\u957f\u671f\u7ef4\u62a4\uff09\u7248\u672c\uff0c\u4e00\u822c\u662f\u5076\u6570\u7248\u672c\uff0c\u4e0d\u8981\u9009\u62e9\u504f\u5b9e\u9a8c\u6027\u8d28\u7684\u5947\u6570\u7248\u672c\u3002"}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u6ce8\u610f\uff1a\u4e0d\u8981\u4f7f\u7528 cnpm\uff01cnpm \u5b89\u88c5\u7684\u6a21\u5757\u8def\u5f84\u6bd4\u8f83\u5947\u602a\uff0cpackager \u4e0d\u80fd\u6b63\u5e38\u8bc6\u522b\uff01"}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["React Native \u9700\u8981 Java Development Kit [JDK] 17\u3002\u4f60\u53ef\u4ee5\u5728\u547d\u4ee4\u884c\u4e2d\u8f93\u5165\n",(0,i.jsx)(n.code,{children:"javac -version"}),"\uff08\u8bf7\u6ce8\u610f\u662f javac\uff0c\u4e0d\u662f java\uff09\u6765\u67e5\u770b\u4f60\u5f53\u524d\u5b89\u88c5\u7684 JDK \u7248\u672c\u3002\u5982\u679c\u7248\u672c\u4e0d\u5408\u8981\u6c42\uff0c\u5219\u53ef\u4ee5\u53bb",(0,i.jsx)(n.a,{href:"https://adoptium.net/?variant=openjdk17&jvmVariant=hotspot",children:"Temurin"}),"\u6216",(0,i.jsx)(n.a,{href:"https://www.oracle.com/java/technologies/downloads/#java17",children:"Oracle JDK"}),"\u4e0a\u4e0b\u8f7d(\u540e\u8005\u4e0b\u8f7d\u9700\u6ce8\u518c\u767b\u5f55)\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u4f4e\u4e8e 0.73 \u7248\u672c\u7684 React Native \u9700\u8981 JDK 11 \u7248\u672c\uff0c\u800c\u4f4e\u4e8e 0.67 \u7684\u9700\u8981 JDK 8 \u7248\u672c\u3002"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:"# \u4f7f\u7528nrm\u5de5\u5177\u5207\u6362\u6dd8\u5b9d\u6e90\nnpx nrm use taobao\n\n# \u5982\u679c\u4e4b\u540e\u9700\u8981\u5207\u6362\u56de\u5b98\u65b9\u6e90\u53ef\u4f7f\u7528\nnpx nrm use npm\n"})}),"\n",(0,i.jsx)(n.h3,{id:"yarn",children:"Yarn"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"http://yarnpkg.com",children:"Yarn"}),"\u662f Facebook \u63d0\u4f9b\u7684\u66ff\u4ee3 npm \u7684\u5de5\u5177\uff0c\u53ef\u4ee5\u52a0\u901f node \u6a21\u5757\u7684\u4e0b\u8f7d\u3002"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:"npm install -g yarn\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u5b89\u88c5\u5b8c yarn \u4e4b\u540e\u5c31\u53ef\u4ee5\u7528 yarn \u4ee3\u66ff npm \u4e86\uff0c\u4f8b\u5982\u7528",(0,i.jsx)(n.code,{children:"yarn"}),"\u4ee3\u66ff",(0,i.jsx)(n.code,{children:"npm install"}),"\u547d\u4ee4\uff0c\u7528",(0,i.jsx)(n.code,{children:"yarn add \u67d0\u7b2c\u4e09\u65b9\u5e93\u540d"}),"\u4ee3\u66ff",(0,i.jsx)(n.code,{children:"npm install \u67d0\u7b2c\u4e09\u65b9\u5e93\u540d"}),"\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"android-\u5f00\u53d1\u73af\u5883",children:"Android \u5f00\u53d1\u73af\u5883"}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u4e4b\u524d\u6ca1\u6709\u63a5\u89e6\u8fc7 Android \u7684\u5f00\u53d1\u73af\u5883\uff0c\u90a3\u4e48\u8bf7\u505a\u597d\u5fc3\u7406\u51c6\u5907\uff0c\u8fd9\u4e00\u8fc7\u7a0b\u76f8\u5f53\u7e41\u7410\u3002\u8bf7",(0,i.jsx)(n.code,{children:"\u4e07\u5206\u4ed4\u7ec6"}),"\u5730\u9605\u8bfb\u4e0b\u9762\u7684\u8bf4\u660e\uff0c\u4e25\u683c\u5bf9\u7167\u6587\u6863\u8fdb\u884c\u914d\u7f6e\u64cd\u4f5c\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u8bd1\u6ce8\uff1a\u8bf7\u6ce8\u610f\uff01\uff01\uff01\u56fd\u5185\u7528\u6237",(0,i.jsx)(n.code,{children:"\u5fc5\u987b\u5fc5\u987b\u5fc5\u987b"}),"\u6709\u7a33\u5b9a\u7684\u4ee3\u7406\u8f6f\u4ef6\uff0c\u5426\u5219\u5728\u4e0b\u8f7d\u3001\u5b89\u88c5\u3001\u914d\u7f6e\u8fc7\u7a0b\u4e2d\u4f1a\u4e0d\u65ad\u906d\u9047\u94fe\u63a5\u8d85\u65f6\u6216\u65ad\u5f00\uff0c\u65e0\u6cd5\u8fdb\u884c\u5f00\u53d1\u5de5\u4f5c\u3002\u67d0\u4e9b\u4ee3\u7406\u8f6f\u4ef6\u53ef\u80fd\u53ea\u63d0\u4f9b\u6d4f\u89c8\u5668\u7684\u4ee3\u7406\u529f\u80fd\uff0c\u6216\u53ea\u9488\u5bf9\u7279\u5b9a\u7f51\u7ad9\u4ee3\u7406\u7b49\u7b49\uff0c\u8bf7\u81ea\u884c\u7814\u7a76\u914d\u7f6e\u6216\u66f4\u6362\u5176\u4ed6\u8f6f\u4ef6\u3002\u603b\u4e4b\u5982\u679c\u62a5\u9519\u4e2d\u51fa\u73b0\u6709\u7f51\u5740\uff0c\u90a3\u5c31\u662f\u56e0\u4e3a\u94fe\u63a5\u6e90\u4ed3\u5e93\u7684\u7f51\u7edc\u94fe\u63a5\u88ab\u963b\u65ad\u4e86\uff0c\u8fd9\u4e00\u963b\u65ad\u73b0\u8c61\u53ef\u80fd\u56e0\u65f6\u95f4\u3001\u5730\u533a\u3001\u8fd0\u8425\u5546\u800c\u4e0d\u540c\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u4e5f\u53ef\u4ee5\u5c1d\u8bd5\u53c2\u8003\u8fd9\u91cc\u7684\u505a\u6cd5",(0,i.jsx)(n.a,{href:"https://github.com/scwang90/SmartRefreshLayout/issues/1376#issuecomment-938422964",children:"\u8bbe\u7f6e\u963f\u91cc\u4e91\u7684 maven \u955c\u50cf\u6e90"}),"\uff0c\u4f46\u8fd9\u4e2a\u505a\u6cd5\u53ef\u80fd\u968f gradle \u6216\u8005 rn \u7248\u672c\u7684\u4e0d\u540c\u800c\u5931\u6548\u3002"]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"1-\u5b89\u88c5-android-studio",children:"1. \u5b89\u88c5 Android Studio"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://developer.android.google.cn/studio/",children:"\u9996\u5148\u4e0b\u8f7d\u548c\u5b89\u88c5 Android Studio"}),'\uff0c\u56fd\u5185\u7528\u6237\u53ef\u80fd\u65e0\u6cd5\u6253\u5f00\u5b98\u65b9\u94fe\u63a5\uff0c\u8bf7\u81ea\u884c\u4f7f\u7528\u641c\u7d22\u5f15\u64ce\u641c\u7d22\u53ef\u7528\u7684\u4e0b\u8f7d\u94fe\u63a5\u3002\u5b89\u88c5\u754c\u9762\u4e2d\u9009\u62e9"Custom"\u9009\u9879\uff0c\u786e\u4fdd\u9009\u4e2d\u4e86\u4ee5\u4e0b\u51e0\u9879\uff1a']}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"Android SDK"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"Android SDK Platform"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"Android Virtual Device"})}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:'\u7136\u540e\u70b9\u51fb"Next"\u6765\u5b89\u88c5\u9009\u4e2d\u7684\u7ec4\u4ef6\u3002'}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u5982\u679c\u9009\u62e9\u6846\u662f\u7070\u7684\uff0c\u4f60\u4e5f\u53ef\u4ee5\u5148\u8df3\u8fc7\uff0c\u7a0d\u540e\u518d\u6765\u5b89\u88c5\u8fd9\u4e9b\u7ec4\u4ef6\u3002"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u770b\u5230\u6b22\u8fce\u754c\u9762\u65f6\uff0c\u5c31\u53ef\u4ee5\u8fdb\u884c\u4e0b\u9762\u7684\u64cd\u4f5c\u4e86\u3002"}),"\n",(0,i.jsx)(n.h4,{id:"2-\u5b89\u88c5-android-sdk",children:"2. \u5b89\u88c5 Android SDK"}),"\n",(0,i.jsxs)(n.p,{children:["Android Studio \u9ed8\u8ba4\u4f1a\u5b89\u88c5\u6700\u65b0\u7248\u672c\u7684 Android SDK\u3002\u76ee\u524d\u7f16\u8bd1 React Native \u5e94\u7528\u9700\u8981\u7684\u662f",(0,i.jsx)(n.code,{children:"Android 14 (UpsideDownCake)"}),"\u7248\u672c\u7684 SDK\uff08\u6ce8\u610f SDK \u7248\u672c\u4e0d\u7b49\u4e8e\u7ec8\u7aef\u7cfb\u7edf\u7248\u672c\uff0cRN \u76ee\u524d\u652f\u6301 android 6 \u4ee5\u4e0a\u8bbe\u5907\uff09\u3002\u4f60\u53ef\u4ee5\u5728 Android Studio \u7684 SDK Manager \u4e2d\u9009\u62e9\u5b89\u88c5\u5404\u7248\u672c\u7684 SDK\u3002"]}),"\n",(0,i.jsx)(n.p,{children:'\u4f60\u53ef\u4ee5\u5728 Android Studio \u7684\u6b22\u8fce\u754c\u9762\u4e2d\u627e\u5230 SDK Manager\u3002\u70b9\u51fb"Configure"\uff0c\u7136\u540e\u5c31\u80fd\u770b\u5230"SDK Manager"\u3002'}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Android Studio Welcome",src:r(75601).Z+"",width:"786",height:"593"})}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:['SDK Manager \u8fd8\u53ef\u4ee5\u5728 Android Studio \u7684"Preferences"\u83dc\u5355\u4e2d\u627e\u5230\u3002\u5177\u4f53\u8def\u5f84\u662f',(0,i.jsx)(n.strong,{children:"Appearance & Behavior"})," \u2192 ",(0,i.jsx)(n.strong,{children:"System Settings"})," \u2192 ",(0,i.jsx)(n.strong,{children:"Android SDK"}),"\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:['\u5728 SDK Manager \u4e2d\u9009\u62e9"SDK Platforms"\u9009\u9879\u5361\uff0c\u7136\u540e\u5728\u53f3\u4e0b\u89d2\u52fe\u9009"Show Package Details"\u3002\u5c55\u5f00',(0,i.jsx)(n.code,{children:"Android 14 (UpsideDownCake)"}),"\u9009\u9879\uff0c\u786e\u4fdd\u52fe\u9009\u4e86\u4e0b\u9762\u8fd9\u4e9b\u7ec4\u4ef6\uff08\u5982\u679c\u4f60\u770b\u4e0d\u5230\u8fd9\u4e2a\u754c\u9762\uff0c\u5219\u9700\u8981\u4f7f\u7528\u7a33\u5b9a\u7684\u4ee3\u7406\u8f6f\u4ef6\uff09\uff1a"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"Android SDK Platform 34"})}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"Intel x86 Atom_64 System Image"}),"\uff08\u5b98\u65b9\u6a21\u62df\u5668\u955c\u50cf\u6587\u4ef6\uff0c\u4f7f\u7528\u975e\u5b98\u65b9\u6a21\u62df\u5668\u4e0d\u9700\u8981\u5b89\u88c5\u6b64\u7ec4\u4ef6\uff09"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:['\u7136\u540e\u70b9\u51fb"SDK Tools"\u9009\u9879\u5361\uff0c\u540c\u6837\u52fe\u4e2d\u53f3\u4e0b\u89d2\u7684"Show Package Details"\u3002\u5c55\u5f00"Android SDK Build-Tools"\u9009\u9879\uff0c\u786e\u4fdd\u9009\u4e2d\u4e86 React Native \u6240\u5fc5\u987b\u7684',(0,i.jsx)(n.code,{children:"34.0.0"}),"\u7248\u672c\u3002\u4f60\u53ef\u4ee5\u540c\u65f6\u5b89\u88c5\u591a\u4e2a\u5176\u4ed6\u7248\u672c\u3002"]}),"\n",(0,i.jsx)(n.p,{children:'\u6700\u540e\u70b9\u51fb"Apply"\u6765\u4e0b\u8f7d\u548c\u5b89\u88c5\u8fd9\u4e9b\u7ec4\u4ef6\u3002'}),"\n",(0,i.jsx)(n.h4,{id:"3-\u914d\u7f6e-android_home-\u73af\u5883\u53d8\u91cf",children:"3. \u914d\u7f6e ANDROID_HOME \u73af\u5883\u53d8\u91cf"}),"\n",(0,i.jsx)(n.p,{children:"React Native \u9700\u8981\u901a\u8fc7\u73af\u5883\u53d8\u91cf\u6765\u4e86\u89e3\u4f60\u7684 Android SDK \u88c5\u5728\u4ec0\u4e48\u8def\u5f84\uff0c\u4ece\u800c\u6b63\u5e38\u8fdb\u884c\u7f16\u8bd1\u3002"}),"\n",(0,i.jsxs)(n.p,{children:["\u6253\u5f00",(0,i.jsx)(n.code,{children:"\u63a7\u5236\u9762\u677f"})," -> ",(0,i.jsx)(n.code,{children:"\u7cfb\u7edf\u548c\u5b89\u5168"})," -> ",(0,i.jsx)(n.code,{children:"\u7cfb\u7edf"})," -> ",(0,i.jsx)(n.code,{children:"\u9ad8\u7ea7\u7cfb\u7edf\u8bbe\u7f6e"})," -> ",(0,i.jsx)(n.code,{children:"\u9ad8\u7ea7"})," -> ",(0,i.jsx)(n.code,{children:"\u73af\u5883\u53d8\u91cf"})," -> ",(0,i.jsx)(n.code,{children:"\u65b0\u5efa"}),"\uff0c\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a",(0,i.jsx)(n.code,{children:"ANDROID_HOME"}),"\u7684\u73af\u5883\u53d8\u91cf\uff08\u7cfb\u7edf\u6216\u7528\u6237\u53d8\u91cf\u5747\u53ef\uff09\uff0c\u6307\u5411\u4f60\u7684 Android SDK \u6240\u5728\u7684\u76ee\u5f55\uff08\u5177\u4f53\u7684\u8def\u5f84\u53ef\u80fd\u548c\u4e0b\u56fe\u4e0d\u4e00\u81f4\uff0c\u8bf7\u81ea\u884c\u786e\u8ba4\uff09\uff1a"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"ANDROID_HOME Environment Variable",src:r(51631).Z+"",width:"653",height:"165"})}),"\n",(0,i.jsx)(n.p,{children:"SDK \u9ed8\u8ba4\u662f\u5b89\u88c5\u5728\u4e0b\u9762\u7684\u76ee\u5f55\uff1a"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-powershell",children:"C:\\Users\\\u4f60\u7684\u7528\u6237\u540d\\AppData\\Local\\Android\\Sdk\n"})}),"\n",(0,i.jsxs)(n.p,{children:['\u4f60\u53ef\u4ee5\u5728 Android Studio \u7684"Preferences"\u83dc\u5355\u4e2d\u67e5\u770b SDK \u7684\u771f\u5b9e\u8def\u5f84\uff0c\u5177\u4f53\u662f',(0,i.jsx)(n.strong,{children:"Appearance & Behavior"})," \u2192 ",(0,i.jsx)(n.strong,{children:"System Settings"})," \u2192 ",(0,i.jsx)(n.strong,{children:"Android SDK"}),"\u3002"]}),"\n",(0,i.jsx)(n.p,{children:"\u4f60\u9700\u8981\u5173\u95ed\u73b0\u6709\u7684\u547d\u4ee4\u7b26\u63d0\u793a\u7a97\u53e3\u7136\u540e\u91cd\u65b0\u6253\u5f00\uff0c\u8fd9\u6837\u65b0\u7684\u73af\u5883\u53d8\u91cf\u624d\u80fd\u751f\u6548\u3002"}),"\n",(0,i.jsx)(n.h4,{id:"4-\u628a\u5de5\u5177\u76ee\u5f55\u6dfb\u52a0\u5230\u73af\u5883\u53d8\u91cf-path",children:"4. \u628a\u5de5\u5177\u76ee\u5f55\u6dfb\u52a0\u5230\u73af\u5883\u53d8\u91cf Path"}),"\n",(0,i.jsxs)(n.p,{children:["\u6253\u5f00",(0,i.jsx)(n.code,{children:"\u63a7\u5236\u9762\u677f"})," -> ",(0,i.jsx)(n.code,{children:"\u7cfb\u7edf\u548c\u5b89\u5168"})," -> ",(0,i.jsx)(n.code,{children:"\u7cfb\u7edf"})," -> ",(0,i.jsx)(n.code,{children:"\u9ad8\u7ea7\u7cfb\u7edf\u8bbe\u7f6e"})," -> ",(0,i.jsx)(n.code,{children:"\u9ad8\u7ea7"})," -> ",(0,i.jsx)(n.code,{children:"\u73af\u5883\u53d8\u91cf"}),"\uff0c\u9009\u4e2d",(0,i.jsx)(n.strong,{children:"Path"}),"\u53d8\u91cf\uff0c\u7136\u540e\u70b9\u51fb",(0,i.jsx)(n.strong,{children:"\u7f16\u8f91"}),"\u3002\u70b9\u51fb",(0,i.jsx)(n.strong,{children:"\u65b0\u5efa"}),"\u7136\u540e\u628a\u4ee5\u4e0b\u5de5\u5177\u76ee\u5f55\u8def\u5f84\u6dfb\u52a0\u8fdb\u53bb\uff1aplatform-tools"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-powershell",children:"%ANDROID_HOME%\\platform-tools\n"})}),"\n",(0,i.jsx)(n.h2,{id:"\u521b\u5efa\u65b0\u9879\u76ee",children:"\u521b\u5efa\u65b0\u9879\u76ee"}),"\n",(0,i.jsx)(o.ZP,{}),"\n",(0,i.jsxs)(n.p,{children:['\u4f7f\u7528 React Native \u5185\u5efa\u7684\u547d\u4ee4\u884c\u5de5\u5177\u6765\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a"AwesomeProject"\u7684\u65b0\u9879\u76ee\u3002\u8fd9\u4e2a\u547d\u4ee4\u884c\u5de5\u5177\u4e0d\u9700\u8981\u5b89\u88c5\uff0c\u53ef\u4ee5\u76f4\u63a5\u7528 node \u81ea\u5e26\u7684',(0,i.jsx)(n.code,{children:"npx"}),"\u547d\u4ee4\u6765\u4f7f\u7528\uff1a"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"\u5fc5\u987b\u8981\u770b\u7684\u6ce8\u610f\u4e8b\u9879\u4e00"}),"\uff1a\u8bf7",(0,i.jsx)(n.code,{children:"\u4e0d\u8981"}),"\u5728\u76ee\u5f55\u3001\u6587\u4ef6\u540d\u4e2d\u4f7f\u7528",(0,i.jsx)(n.code,{children:"\u4e2d\u6587\u3001\u7a7a\u683c"}),"\u7b49\u7279\u6b8a\u7b26\u53f7\u3002\u8bf7",(0,i.jsx)(n.code,{children:"\u4e0d\u8981"}),"\u5355\u72ec\u4f7f\u7528\u5e38\u89c1\u7684\u5173\u952e\u5b57\u4f5c\u4e3a\u9879\u76ee\u540d\uff08\u5982 class, native, new, package \u7b49\u7b49\uff09\u3002\u8bf7",(0,i.jsx)(n.code,{children:"\u4e0d\u8981"}),"\u4f7f\u7528\u4e0e\u6838\u5fc3\u6a21\u5757\u540c\u540d\u7684\u9879\u76ee\u540d\uff08\u5982 react, react-native \u7b49\uff09\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"\u5fc5\u987b\u8981\u770b\u7684\u6ce8\u610f\u4e8b\u9879\u4e8c"}),"\uff1a\u8bf7",(0,i.jsx)(n.code,{children:"\u4e0d\u8981"}),"\u5728\u67d0\u4e9b\u6743\u9650\u654f\u611f\u7684\u76ee\u5f55\u4f8b\u5982 System32 \u76ee\u5f55\u4e2d init \u9879\u76ee\uff01\u4f1a\u6709\u5404\u79cd\u6743\u9650\u9650\u5236\u5bfc\u81f4\u4e0d\u80fd\u8fd0\u884c\uff01"]}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"\u5fc5\u987b\u8981\u770b\u7684\u6ce8\u610f\u4e8b\u9879\u4e09"}),"\uff1a\u8bf7",(0,i.jsx)(n.code,{children:"\u4e0d\u8981"}),"\u4f7f\u7528\u4e00\u4e9b\u79fb\u690d\u7684\u7ec8\u7aef\u73af\u5883\uff0c\u4f8b\u5982",(0,i.jsx)(n.code,{children:"git bash"}),"\u6216",(0,i.jsx)(n.code,{children:"mingw"}),"\u7b49\u7b49\uff0c\u8fd9\u4e9b\u5728 windows \u4e0b\u53ef\u80fd\u5bfc\u81f4\u627e\u4e0d\u5230\u73af\u5883\u53d8\u91cf\u3002\u8bf7\u4f7f\u7528\u7cfb\u7edf\u81ea\u5e26\u7684\u547d\u4ee4\u884c\uff08CMD \u6216 powershell\uff09\u8fd0\u884c\u3002"]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npx react-native@latest init AwesomeProject\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u662f\u60f3\u628a React Native \u96c6\u6210\u5230\u73b0\u6709\u7684\u539f\u751f\u9879\u76ee\u4e2d\uff0c\u5219\u6b65\u9aa4\u5b8c\u5168\u4e0d\u540c\uff0c\u8bf7\u53c2\u8003",(0,i.jsx)(n.a,{href:"/docs/next/integration-with-existing-apps",children:"\u96c6\u6210\u5230\u73b0\u6709\u539f\u751f\u5e94\u7528"}),"\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"\u53ef\u9009\u53c2\u6570-\u6307\u5b9a\u7248\u672c\u6216\u9879\u76ee\u6a21\u677f",children:"[\u53ef\u9009\u53c2\u6570] \u6307\u5b9a\u7248\u672c\u6216\u9879\u76ee\u6a21\u677f"}),"\n",(0,i.jsxs)(n.p,{children:["\u4f60\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"--version"}),"\u53c2\u6570\uff08\u6ce8\u610f\u662f",(0,i.jsx)(n.code,{children:"\u4e24"}),"\u4e2a\u6760\uff09\u521b\u5efa\u6307\u5b9a\u7248\u672c\u7684\u9879\u76ee\u3002\u6ce8\u610f\u7248\u672c\u53f7\u5fc5\u987b\u7cbe\u786e\u5230\u4e24\u4e2a\u5c0f\u6570\u70b9\u3002"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npx react-native@X.XX.X init AwesomeProject --version X.XX.X\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u8fd8\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"--template"}),"\u6765\u4f7f\u7528\u4e00\u4e9b\u793e\u533a\u63d0\u4f9b\u7684\u6a21\u677f\u3002"]}),"\n",(0,i.jsx)(n.h2,{id:"\u51c6\u5907-android-\u8bbe\u5907",children:"\u51c6\u5907 Android \u8bbe\u5907"}),"\n",(0,i.jsxs)(n.p,{children:["\u4f60\u9700\u8981\u51c6\u5907\u4e00\u53f0 Android \u8bbe\u5907\u6765\u8fd0\u884c React Native Android \u5e94\u7528\u3002\u8fd9\u91cc\u6240\u6307\u7684\u8bbe\u5907\u65e2\u53ef\u4ee5\u662f\u771f\u673a\uff0c\u4e5f\u53ef\u4ee5\u662f\u6a21\u62df\u5668\u3002\u540e\u9762\u6211\u4eec\u6240\u6709\u7684\u6587\u6863\u9664\u975e\u7279\u522b\u8bf4\u660e\uff0c\u5e76\u4e0d\u533a\u5206\u771f\u673a\u6216\u8005\u6a21\u62df\u5668\u3002Android \u5b98\u65b9\u63d0\u4f9b\u4e86\u540d\u4e3a Android Virtual Device\uff08\u7b80\u79f0 AVD\uff09\u7684\u6a21\u62df\u5668\u3002\u6b64\u5916\u8fd8\u6709\u5f88\u591a\u7b2c\u4e09\u65b9\u63d0\u4f9b\u7684\u6a21\u62df\u5668\u5982",(0,i.jsx)(n.a,{href:"https://www.genymotion.com/download",children:"Genymotion"}),"\u3001BlueStack \u7b49\u3002\u4e00\u822c\u6765\u8bf4\u5b98\u65b9\u6a21\u62df\u5668\u514d\u8d39\u3001\u529f\u80fd\u5b8c\u6574\uff0c\u4f46\u6027\u80fd\u8f83\u5dee\u3002\u7b2c\u4e09\u65b9\u6a21\u62df\u5668\u6027\u80fd\u8f83\u597d\uff0c\u4f46\u53ef\u80fd\u9700\u8981\u4ed8\u8d39\uff0c\u6216\u5e26\u6709\u5e7f\u544a\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"\u4f7f\u7528-android-\u771f\u673a",children:"\u4f7f\u7528 Android \u771f\u673a"}),"\n",(0,i.jsxs)(n.p,{children:["\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528 Android \u771f\u673a\u6765\u4ee3\u66ff\u6a21\u62df\u5668\u8fdb\u884c\u5f00\u53d1\uff0c\u53ea\u9700\u7528 usb \u6570\u636e\u7ebf\u8fde\u63a5\u5230\u7535\u8111\uff0c\u7136\u540e\u9075\u7167",(0,i.jsx)(n.a,{href:"/docs/next/running-on-device",children:"\u5728\u8bbe\u5907\u4e0a\u8fd0\u884c"}),"\u8fd9\u7bc7\u6587\u6863\u7684\u8bf4\u660e\u64cd\u4f5c\u5373\u53ef\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"\u4f7f\u7528-android-\u6a21\u62df\u5668",children:"\u4f7f\u7528 Android \u6a21\u62df\u5668"}),"\n",(0,i.jsx)(n.p,{children:'\u4f60\u53ef\u4ee5\u4f7f\u7528 Android Studio \u6253\u5f00\u9879\u76ee\u4e0b\u7684"android"\u76ee\u5f55\uff0c\u7136\u540e\u53ef\u4ee5\u4f7f\u7528"AVD Manager"\u6765\u67e5\u770b\u53ef\u7528\u7684\u865a\u62df\u8bbe\u5907\uff0c\u5b83\u7684\u56fe\u6807\u770b\u8d77\u6765\u50cf\u4e0b\u9762\u8fd9\u6837\uff1a'}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Android Studio AVD Manager",src:r(13488).Z+"",width:"29",height:"25"})}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u521a\u521a\u624d\u5b89\u88c5 Android Studio\uff0c\u90a3\u4e48\u53ef\u80fd\u9700\u8981\u5148",(0,i.jsx)(n.a,{href:"https://developer.android.com/studio/run/managing-avds.html",children:"\u521b\u5efa\u4e00\u4e2a\u865a\u62df\u8bbe\u5907"}),'\u3002\u70b9\u51fb"Create Virtual Device..."\uff0c\u7136\u540e\u9009\u62e9\u6240\u9700\u7684\u8bbe\u5907\u7c7b\u578b\u5e76\u70b9\u51fb"Next"\uff0c\u7136\u540e\u9009\u62e9',(0,i.jsx)(n.strong,{children:"Tiramisu"})," API Level 33 image."]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u8bd1\u6ce8\uff1a\u8bf7\u4e0d\u8981\u8f7b\u6613\u70b9\u51fb Android Studio \u4e2d\u53ef\u80fd\u5f39\u51fa\u7684\u5efa\u8bae\u66f4\u65b0\u9879\u76ee\u4e2d\u67d0\u4f9d\u8d56\u9879\u7684\u5efa\u8bae\uff0c\u5426\u5219\u53ef\u80fd\u5bfc\u81f4\u65e0\u6cd5\u8fd0\u884c\u3002"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"\u7f16\u8bd1\u5e76\u8fd0\u884c-react-native-\u5e94\u7528",children:"\u7f16\u8bd1\u5e76\u8fd0\u884c React Native \u5e94\u7528"}),"\n",(0,i.jsxs)(n.p,{children:["\u786e\u4fdd\u4f60\u5148\u8fd0\u884c\u4e86\u6a21\u62df\u5668\u6216\u8005\u8fde\u63a5\u4e86\u771f\u673a\uff0c\u7136\u540e\u5728\u4f60\u7684\u9879\u76ee\u76ee\u5f55\u4e2d\u8fd0\u884c",(0,i.jsx)(n.code,{children:"yarn android"}),"\u6216\u8005",(0,i.jsx)(n.code,{children:"yarn react-native run-android"}),"\uff1a"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:"cd AwesomeProject\nyarn android\n# \u6216\u8005\nyarn react-native run-android\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u6b64\u547d\u4ee4\u4f1a\u5bf9\u9879\u76ee\u7684\u539f\u751f\u90e8\u5206\u8fdb\u884c\u7f16\u8bd1\uff0c\u540c\u65f6\u5728\u53e6\u5916\u4e00\u4e2a\u547d\u4ee4\u884c\u4e2d\u542f\u52a8",(0,i.jsx)(n.code,{children:"Metro"}),"\u670d\u52a1\u5bf9 js \u4ee3\u7801\u8fdb\u884c\u5b9e\u65f6\u6253\u5305\u5904\u7406\uff08\u7c7b\u4f3c webpack\uff09\u3002",(0,i.jsx)(n.code,{children:"Metro"}),"\u670d\u52a1\u4e5f\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"yarn start"}),"\u547d\u4ee4\u5355\u72ec\u542f\u52a8\u3002"]}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u914d\u7f6e\u6ca1\u6709\u95ee\u9898\uff0c\u4f60\u5e94\u8be5\u53ef\u4ee5\u770b\u5230\u5e94\u7528\u81ea\u52a8\u5b89\u88c5\u5230\u8bbe\u5907\u4e0a\u5e76\u5f00\u59cb\u8fd0\u884c\u3002\u6ce8\u610f\u7b2c\u4e00\u6b21\u8fd0\u884c\u65f6\u9700\u8981\u4e0b\u8f7d\u5927\u91cf\u7f16\u8bd1\u4f9d\u8d56\uff0c\u8017\u65f6\u53ef\u80fd\u6570\u5341\u5206\u949f\u3002\u6b64\u8fc7\u7a0b",(0,i.jsx)(n.code,{children:"\u4e25\u91cd\u4f9d\u8d56\u7a33\u5b9a\u7684\u4ee3\u7406\u8f6f\u4ef6"}),"\uff0c\u5426\u5219\u5c06\u9891\u7e41\u906d\u9047\u94fe\u63a5\u8d85\u65f6\u548c\u65ad\u5f00\uff0c\u5bfc\u81f4\u65e0\u6cd5\u8fd0\u884c\u3002"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"npx react-native run-android"}),"\u53ea\u662f\u8fd0\u884c\u5e94\u7528\u7684\u65b9\u5f0f\u4e4b\u4e00\u3002\u4f60\u4e5f\u53ef\u4ee5\u5728 Android Studio \u4e2d\u76f4\u63a5\u8fd0\u884c\u5e94\u7528\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u8bd1\u6ce8\uff1a\u5efa\u8bae\u5728",(0,i.jsx)(n.code,{children:"run-android"}),"\u6210\u529f\u540e\u518d\u5c1d\u8bd5\u4f7f\u7528 Android Studio \u542f\u52a8\u3002\u8bf7\u4e0d\u8981\u8f7b\u6613\u70b9\u51fb Android Studio \u4e2d\u53ef\u80fd\u5f39\u51fa\u7684\u5efa\u8bae\u66f4\u65b0\u9879\u76ee\u4e2d\u67d0\u4f9d\u8d56\u9879\u7684\u5efa\u8bae\uff0c\u5426\u5219\u53ef\u80fd\u5bfc\u81f4\u65e0\u6cd5\u8fd0\u884c\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u65e0\u6cd5\u6b63\u5e38\u8fd0\u884c\uff0c\u9047\u5230\u5947\u5947\u602a\u602a\u7684\u7ea2\u5c4f\u9519\u8bef\uff0c\u5148\u56de\u5934",(0,i.jsx)(n.code,{children:"\u4ed4\u7ec6\u5bf9\u7167\u6587\u6863\u68c0\u67e5"}),"\uff0c\u7136\u540e\u53ef\u4ee5\u770b\u770b",(0,i.jsx)(n.a,{href:"https://github.com/reactnativecn/react-native-website/issues",children:"\u95ee\u9898\u8ba8\u8bba\u533a"}),"\u3002\u4e0d\u540c\u65f6\u671f\u4e0d\u540c\u7248\u672c\u53ef\u80fd\u4f1a\u78b0\u5230\u4e0d\u540c\u7684\u95ee\u9898\uff0c\u6211\u4eec\u4f1a\u5728\u8bba\u575b\u4e2d\u53ca\u65f6\u89e3\u7b54\u66f4\u65b0\u3002\u4f46\u8bf7\u6ce8\u610f",(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.em,{children:"\u5343\u4e07\u4e0d\u8981"})}),"\u6267\u884c bundle \u547d\u4ee4\uff0c\u90a3\u6837\u4f1a\u5bfc\u81f4\u4ee3\u7801\u5b8c\u5168\u65e0\u6cd5\u5237\u65b0\u3002"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"\u4fee\u6539\u9879\u76ee",children:"\u4fee\u6539\u9879\u76ee"}),"\n",(0,i.jsx)(n.p,{children:"\u73b0\u5728\u4f60\u5df2\u7ecf\u6210\u529f\u8fd0\u884c\u4e86\u9879\u76ee\uff0c\u6211\u4eec\u53ef\u4ee5\u5f00\u59cb\u5c1d\u8bd5\u52a8\u624b\u6539\u4e00\u6539\u4e86\uff1a"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\u4f7f\u7528\u4f60\u559c\u6b22\u7684\u6587\u672c\u7f16\u8f91\u5668\u6253\u5f00",(0,i.jsx)(n.code,{children:"App.js"}),"\u5e76\u968f\u4fbf\u6539\u4e0a\u51e0\u884c"]}),"\n",(0,i.jsxs)(n.li,{children:["\u6309\u4e24\u4e0b R \u952e\uff0c\u6216\u662f\u5728\u5f00\u53d1\u8005\u83dc\u5355\u4e2d\u9009\u62e9 ",(0,i.jsx)(n.em,{children:"Reload"}),"\uff0c\u5c31\u53ef\u4ee5\u770b\u5230\u4f60\u7684\u6700\u65b0\u4fee\u6539\u3002"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"\u5b8c\u6210\u4e86",children:"\u5b8c\u6210\u4e86\uff01"}),"\n",(0,i.jsx)(n.p,{children:"\u606d\u559c\uff01\u4f60\u5df2\u7ecf\u6210\u529f\u8fd0\u884c\u5e76\u4fee\u6539\u4e86\u4f60\u7684\u7b2c\u4e00\u4e2a React Native \u5e94\u7528"}),"\n",(0,i.jsx)("center",{children:(0,i.jsx)("img",{src:"https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/GettingStartedCongratulations.png",width:"150"})}),"\n",(0,i.jsx)(n.h2,{id:"\u63a5\u4e0b\u6765",children:"\u63a5\u4e0b\u6765\uff1f"}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u60f3\u628a React Native \u96c6\u6210\u5230\u73b0\u6709\u7684\u539f\u751f\u9879\u76ee\u4e2d\uff0c\u5219\u8bf7\u53c2\u8003",(0,i.jsx)(n.a,{href:"/docs/next/integration-with-existing-apps",children:"\u96c6\u6210\u5230\u73b0\u6709\u539f\u751f\u5e94\u7528"}),"\u3002"]}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u60f3\u4ece\u5934\u5f00\u59cb\u5b66\u4e60 React Native \u5f00\u53d1\uff0c\u53ef\u4ee5\u4ece",(0,i.jsx)(n.a,{href:"/docs/next/environment-setup",children:"\u7b80\u4ecb"}),"\u6587\u6863\u5f00\u59cb\u3002"]})]})}function m(e={}){const{wrapper:n}={...(0,d.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(v,{...e})}):v(e)}const g=[{value:"\u5b89\u88c5\u4f9d\u8d56",id:"\u5b89\u88c5\u4f9d\u8d56",level:2},{value:"Node & Watchman",id:"node--watchman",level:3},{value:"Yarn",id:"yarn",level:3},{value:"Xcode",id:"xcode",level:3},{value:"Xcode \u7684\u547d\u4ee4\u884c\u5de5\u5177",id:"xcode-\u7684\u547d\u4ee4\u884c\u5de5\u5177",level:4},{value:"\u5728 Xcode \u4e2d\u5b89\u88c5 iOS \u6a21\u62df\u5668",id:"\u5728-xcode-\u4e2d\u5b89\u88c5-ios-\u6a21\u62df\u5668",level:4},{value:"CocoaPods",id:"cocoapods",level:4},{value:"\u521b\u5efa\u65b0\u9879\u76ee",id:"\u521b\u5efa\u65b0\u9879\u76ee",level:2},...o.d$,{value:"[\u53ef\u9009\u53c2\u6570] \u6307\u5b9a\u7248\u672c\u6216\u9879\u76ee\u6a21\u677f",id:"\u53ef\u9009\u53c2\u6570-\u6307\u5b9a\u7248\u672c\u6216\u9879\u76ee\u6a21\u677f",level:3},{value:"[\u53ef\u9009\u6587\u4ef6] Xcode \u7684\u73af\u5883\u914d\u7f6e\u6587\u4ef6",id:"\u53ef\u9009\u6587\u4ef6-xcode-\u7684\u73af\u5883\u914d\u7f6e\u6587\u4ef6",level:3},{value:"\u7f16\u8bd1\u5e76\u8fd0\u884c React Native \u5e94\u7528",id:"\u7f16\u8bd1\u5e76\u8fd0\u884c-react-native-\u5e94\u7528",level:2},{value:"\u5728\u771f\u673a\u4e0a\u8fd0\u884c",id:"\u5728\u771f\u673a\u4e0a\u8fd0\u884c",level:3},{value:"\u4fee\u6539\u9879\u76ee",id:"\u4fee\u6539\u9879\u76ee",level:3},{value:"\u5b8c\u6210\u4e86\uff01",id:"\u5b8c\u6210\u4e86",level:3},{value:"\u63a5\u4e0b\u6765\uff1f",id:"\u63a5\u4e0b\u6765",level:2}];function A(e){const n={a:"a",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,d.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h2,{id:"\u5b89\u88c5\u4f9d\u8d56",children:"\u5b89\u88c5\u4f9d\u8d56"}),"\n",(0,i.jsx)(n.p,{children:"\u5fc5\u987b\u5b89\u88c5\u7684\u4f9d\u8d56\u6709\uff1aNode\u3001Watchman\u3001Xcode \u548c CocoaPods\u3002"}),"\n",(0,i.jsxs)(n.p,{children:["\u867d\u7136\u4f60\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"\u4efb\u4f55\u7f16\u8f91\u5668"}),"\u6765\u5f00\u53d1\u5e94\u7528\uff08\u7f16\u5199 js \u4ee3\u7801\uff09\uff0c\u4f46\u4f60\u4ecd\u7136\u5fc5\u987b\u5b89\u88c5 Xcode \u6765\u83b7\u5f97\u7f16\u8bd1 iOS \u5e94\u7528\u6240\u9700\u7684\u5de5\u5177\u548c\u73af\u5883\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"node--watchman",children:"Node & Watchman"}),"\n",(0,i.jsxs)(n.p,{children:["\u6211\u4eec\u63a8\u8350\u4f7f\u7528",(0,i.jsx)(n.a,{href:"http://brew.sh/",children:"Homebrew"}),"\u6765\u5b89\u88c5 Node \u548c Watchman\u3002\u5728\u547d\u4ee4\u884c\u4e2d\u6267\u884c\u4e0b\u5217\u547d\u4ee4\u5b89\u88c5\uff08\u5982\u5b89\u88c5\u8f83\u6162\u53ef\u4ee5\u5c1d\u8bd5\u963f\u91cc\u4e91\u7684",(0,i.jsx)(n.a,{href:"https://developer.aliyun.com/mirror/homebrew",children:"\u955c\u50cf\u6e90"}),"\uff09\uff1a"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:"brew install node@18\nbrew install watchman\n"})}),"\n",(0,i.jsx)(n.p,{children:"\u5982\u679c\u4f60\u5df2\u7ecf\u5b89\u88c5\u4e86 Node\uff0c\u8bf7\u68c0\u67e5\u5176\u7248\u672c\u662f\u5426\u5728 18 \u4ee5\u4e0a\u3002\u5b89\u88c5\u5b8c Node \u540e\u5efa\u8bae\u8bbe\u7f6e npm \u955c\u50cf\uff08\u6dd8\u5b9d\u6e90\uff09\u4ee5\u52a0\u901f\u540e\u9762\u7684\u8fc7\u7a0b\uff08\u6216\u4f7f\u7528\u79d1\u5b66\u4e0a\u7f51\u5de5\u5177\uff09\u3002"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u6ce8\u610f\uff1a\u5f3a\u70c8\u5efa\u8bae\u59cb\u7ec8\u9009\u62e9 Node \u5f53\u524d\u7684 LTS \uff08\u957f\u671f\u7ef4\u62a4\uff09\u7248\u672c\uff0c\u4e00\u822c\u662f\u5076\u6570\u7248\u672c\uff0c\u4e0d\u8981\u9009\u62e9\u504f\u5b9e\u9a8c\u6027\u8d28\u7684\u5947\u6570\u7248\u672c\u3002"}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u6ce8\u610f\uff1a\u4e0d\u8981\u4f7f\u7528 cnpm\uff01cnpm \u5b89\u88c5\u7684\u6a21\u5757\u8def\u5f84\u6bd4\u8f83\u5947\u602a\uff0cpackager \u4e0d\u80fd\u6b63\u5e38\u8bc6\u522b\uff01"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:"# \u4f7f\u7528nrm\u5de5\u5177\u5207\u6362\u6dd8\u5b9d\u6e90\nnpx nrm use taobao\n\n# \u5982\u679c\u4e4b\u540e\u9700\u8981\u5207\u6362\u56de\u5b98\u65b9\u6e90\u53ef\u4f7f\u7528\nnpx nrm use npm\n"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://facebook.github.io/watchman",children:"Watchman"}),"\u5219\u662f\u7531 Facebook \u63d0\u4f9b\u7684\u76d1\u89c6\u6587\u4ef6\u7cfb\u7edf\u53d8\u66f4\u7684\u5de5\u5177\u3002\u5b89\u88c5\u6b64\u5de5\u5177\u53ef\u4ee5\u63d0\u9ad8\u5f00\u53d1\u65f6\u7684\u6027\u80fd\uff08packager \u53ef\u4ee5\u5feb\u901f\u6355\u6349\u6587\u4ef6\u7684\u53d8\u5316\u4ece\u800c\u5b9e\u73b0\u5b9e\u65f6\u5237\u65b0\uff09\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"yarn",children:"Yarn"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://classic.yarnpkg.com",children:"Yarn"}),"\u662f Facebook \u63d0\u4f9b\u7684\u66ff\u4ee3 npm \u7684\u5de5\u5177\uff0c\u53ef\u4ee5\u52a0\u901f node \u6a21\u5757\u7684\u4e0b\u8f7d\u3002"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:"npm install -g yarn\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u5b89\u88c5\u5b8c yarn \u4e4b\u540e\u5c31\u53ef\u4ee5\u7528 yarn \u4ee3\u66ff npm \u4e86\uff0c\u4f8b\u5982\u7528",(0,i.jsx)(n.code,{children:"yarn"}),"\u4ee3\u66ff",(0,i.jsx)(n.code,{children:"npm install"}),"\u547d\u4ee4\uff0c\u7528",(0,i.jsx)(n.code,{children:"yarn add \u67d0\u7b2c\u4e09\u65b9\u5e93\u540d"}),"\u4ee3\u66ff",(0,i.jsx)(n.code,{children:"npm install \u67d0\u7b2c\u4e09\u65b9\u5e93\u540d"}),"\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"xcode",children:"Xcode"}),"\n",(0,i.jsxs)(n.p,{children:["React Native \u76ee\u524d\u9700\u8981",(0,i.jsx)(n.a,{href:"https://developer.apple.com/xcode/downloads/",children:"Xcode"})," 14.1 \u6216\u66f4\u9ad8\u7248\u672c\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7 App Store \u6216\u662f\u5230",(0,i.jsx)(n.a,{href:"https://developer.apple.com/xcode/downloads/",children:"Apple \u5f00\u53d1\u8005\u5b98\u7f51"}),"\u4e0a\u4e0b\u8f7d\u3002\u8fd9\u4e00\u6b65\u9aa4\u4f1a\u540c\u65f6\u5b89\u88c5 Xcode IDE\u3001Xcode \u7684\u547d\u4ee4\u884c\u5de5\u5177\u548c iOS \u6a21\u62df\u5668\u3002"]}),"\n",(0,i.jsx)(n.h4,{id:"xcode-\u7684\u547d\u4ee4\u884c\u5de5\u5177",children:"Xcode \u7684\u547d\u4ee4\u884c\u5de5\u5177"}),"\n",(0,i.jsxs)(n.p,{children:["\u542f\u52a8 Xcode\uff0c\u5e76\u5728",(0,i.jsx)(n.code,{children:"Xcode | Preferences | Locations"}),"\u83dc\u5355\u4e2d\u68c0\u67e5\u4e00\u4e0b\u662f\u5426\u88c5\u6709\u67d0\u4e2a\u7248\u672c\u7684",(0,i.jsx)(n.code,{children:"Command Line Tools"}),"\u3002Xcode \u7684\u547d\u4ee4\u884c\u5de5\u5177\u4e2d\u5305\u542b\u4e00\u4e9b\u5fc5\u987b\u7684\u5de5\u5177\uff0c\u6bd4\u5982",(0,i.jsx)(n.code,{children:"git"}),"\u7b49\u3002"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Xcode Command Line Tools",src:r(78656).Z+"",width:"1724",height:"1158"})}),"\n",(0,i.jsx)(n.h4,{id:"\u5728-xcode-\u4e2d\u5b89\u88c5-ios-\u6a21\u62df\u5668",children:"\u5728 Xcode \u4e2d\u5b89\u88c5 iOS \u6a21\u62df\u5668"}),"\n",(0,i.jsxs)(n.p,{children:["\u5b89\u88c5\u6a21\u62df\u5668\u53ea\u9700\u6253\u5f00 ",(0,i.jsx)("strong",{children:"Xcode > Preferences..."})," \u83dc\u5355\uff0c\u7136\u540e\u9009\u62e9 ",(0,i.jsx)("strong",{children:"Components"})," \u9009\u9879\uff0c\u5373\u53ef\u770b\u5230\u5404\u79cd\u53ef\u4f9b\u5b89\u88c5\u7684\u4e0d\u540c\u7684 iOS \u7248\u672c\u7684\u6a21\u62df\u5668\u3002"]}),"\n",(0,i.jsx)(n.h4,{id:"cocoapods",children:"CocoaPods"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://cocoapods.org/",children:"CocoaPods"}),"\u662f\u7528 Ruby \u7f16\u5199\u7684\u5305\u7ba1\u7406\u5668\uff08\u53ef\u4ee5\u7406\u89e3\u4e3a\u9488\u5bf9 iOS \u7684 npm\uff09\u3002\u4ece 0.60 \u7248\u672c\u5f00\u59cb react native \u7684 iOS \u7248\u672c\u9700\u8981\u4f7f\u7528 CocoaPods \u6765\u7ba1\u7406\u4f9d\u8d56\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528\u4e0b\u9762\u7684\u547d\u4ee4\u6765\u5b89\u88c5 CocoaPods\u3002CocoaPods \u7684\u7248\u672c\u9700\u8981 1.10 \u4ee5\u4e0a\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u5f53\u7136\u5b89\u88c5\u53ef\u80fd\u4e5f\u4e0d\u987a\u5229\uff0c\u8bf7\u4f7f\u7528\u4ee3\u7406\u8f6f\u4ef6\u3002"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-sh",children:"sudo gem install cocoapods\n"})}),"\n",(0,i.jsx)(n.p,{children:"\u6216\u8005\u53ef\u4ee5\u4f7f\u7528 brew \u6765\u5b89\u88c5"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-sh",children:"brew install cocoapods\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u8981\u4e86\u89e3\u66f4\u591a\u4fe1\u606f\uff0c\u53ef\u4ee5\u8bbf\u95ee",(0,i.jsx)(n.a,{href:"https://guides.cocoapods.org/using/getting-started.html",children:"CocoaPods \u7684\u5b98\u7f51"}),"\u3002"]}),"\n",(0,i.jsx)(n.h2,{id:"\u521b\u5efa\u65b0\u9879\u76ee",children:"\u521b\u5efa\u65b0\u9879\u76ee"}),"\n",(0,i.jsx)(o.ZP,{}),"\n",(0,i.jsxs)(n.p,{children:['\u4f7f\u7528 React Native \u5185\u5efa\u7684\u547d\u4ee4\u884c\u5de5\u5177\u6765\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a"AwesomeProject"\u7684\u65b0\u9879\u76ee\u3002\u8fd9\u4e2a\u547d\u4ee4\u884c\u5de5\u5177\u4e0d\u9700\u8981\u5b89\u88c5\uff0c\u53ef\u4ee5\u76f4\u63a5\u7528 node \u81ea\u5e26\u7684',(0,i.jsx)(n.code,{children:"npx"}),"\u547d\u4ee4\u6765\u4f7f\u7528\uff08\u6ce8\u610f init \u547d\u4ee4\u9ed8\u8ba4\u4f1a\u521b\u5efa\u6700\u65b0\u7684\u7248\u672c\uff09\uff1a"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npx react-native@latest init AwesomeProject\n"})}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"\u6ce8\u610f\u4e00"}),"\uff1a\u8bf7",(0,i.jsx)(n.code,{children:"\u4e0d\u8981"}),"\u5728\u76ee\u5f55\u3001\u6587\u4ef6\u540d\u4e2d\u4f7f\u7528\u4e2d\u6587\u3001\u7a7a\u683c\u7b49\u7279\u6b8a\u7b26\u53f7\u3002\u8bf7",(0,i.jsx)(n.code,{children:"\u4e0d\u8981"}),"\u5355\u72ec\u4f7f\u7528\u5e38\u89c1\u7684\u5173\u952e\u5b57\u4f5c\u4e3a\u9879\u76ee\u540d\uff08\u5982 class, native, new, package \u7b49\u7b49\uff09\u3002\u8bf7",(0,i.jsx)(n.code,{children:"\u4e0d\u8981"}),"\u4f7f\u7528\u4e0e\u6838\u5fc3\u6a21\u5757\u540c\u540d\u7684\u9879\u76ee\u540d\uff08\u5982 react, react-native \u7b49\uff09\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"\u6ce8\u610f\u4e8c"}),"\uff1a0.60 \u53ca\u4ee5\u4e0a\u7248\u672c\u7684\u539f\u751f\u4f9d\u8d56\u662f\u901a\u8fc7 CocoaPods \u96c6\u6210\u5b89\u88c5\u7684\u3002CocoaPods \u7684\u6e90\u5fc5\u987b\u4f7f\u7528\u4ee3\u7406\u8bbf\u95ee\uff08\u955c\u50cf\u6e90\u4e5f\u65e0\u6548\uff09\u3002\u5982\u679c\u5728 CocoaPods \u7684\u4f9d\u8d56\u5b89\u88c5\u6b65\u9aa4\u5361\u4f4f\uff08\u547d\u4ee4\u884c\u505c\u5728 Installing CocoaPods dependencies \u5f88\u4e45\uff0c\u6216\u5404\u79cd\u7f51\u7edc\u8d85\u65f6\u91cd\u7f6e\u62a5\u9519\uff0c\u6216\u5728 ios \u76ee\u5f55\u4e2d\u65e0\u6cd5\u751f\u6210.xcworkspace \u6587\u4ef6\uff09\uff0c\u8bf7\u52a1\u5fc5\u68c0\u67e5\u786e\u5b9a\u4f60\u7684\u4ee3\u7406\u914d\u7f6e\u662f\u5426\u5bf9\u547d\u4ee4\u884c\u6709\u6548\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u662f\u60f3\u628a React Native \u96c6\u6210\u5230\u73b0\u6709\u7684\u539f\u751f\u9879\u76ee\u4e2d\uff0c\u5219\u6b65\u9aa4\u5b8c\u5168\u4e0d\u540c\uff0c\u8bf7\u53c2\u8003",(0,i.jsx)(n.a,{href:"/docs/next/integration-with-existing-apps",children:"\u96c6\u6210\u5230\u73b0\u6709\u539f\u751f\u5e94\u7528"}),"\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"\u53ef\u9009\u53c2\u6570-\u6307\u5b9a\u7248\u672c\u6216\u9879\u76ee\u6a21\u677f",children:"[\u53ef\u9009\u53c2\u6570] \u6307\u5b9a\u7248\u672c\u6216\u9879\u76ee\u6a21\u677f"}),"\n",(0,i.jsxs)(n.p,{children:["\u4f60\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"--version"}),"\u53c2\u6570\uff08\u6ce8\u610f\u662f",(0,i.jsx)(n.code,{children:"\u4e24"}),"\u4e2a\u6760\uff09\u521b\u5efa\u6307\u5b9a\u7248\u672c\u7684\u9879\u76ee\u3002\u6ce8\u610f\u7248\u672c\u53f7\u5fc5\u987b\u7cbe\u786e\u5230\u4e24\u4e2a\u5c0f\u6570\u70b9\u3002"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npx react-native@X.XX.X init AwesomeProject --version X.XX.X\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u8fd8\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"--template"}),"\u6765\u4f7f\u7528\u4e00\u4e9b\u793e\u533a\u63d0\u4f9b\u7684\u6a21\u677f\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"\u53ef\u9009\u6587\u4ef6-xcode-\u7684\u73af\u5883\u914d\u7f6e\u6587\u4ef6",children:"[\u53ef\u9009\u6587\u4ef6] Xcode \u7684\u73af\u5883\u914d\u7f6e\u6587\u4ef6"}),"\n",(0,i.jsxs)(n.p,{children:["\u4ece React Native \u7248\u672c 0.69 \u5f00\u59cb\uff0c\u53ef\u4ee5\u4f7f\u7528\u6a21\u677f\u63d0\u4f9b\u7684 ",(0,i.jsx)(n.code,{children:".xcode.env"})," \u6587\u4ef6\u6765\u914d\u7f6e Xcode \u73af\u5883\u3002"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:".xcode.env"})," \u6587\u4ef6\u4e2d\u5305\u542b\u4e00\u4e2a\u73af\u5883\u53d8\u91cf\u793a\u4f8b\uff0c\u7528\u4e8e\u5728 ",(0,i.jsx)(n.code,{children:"NODE_BINARY"})," \u53d8\u91cf\u4e2d\u5bfc\u51fa ",(0,i.jsx)(n.code,{children:"node"})," \u6267\u884c\u6587\u4ef6\u7684\u8def\u5f84\u3002\u8fd9\u662f\u5c06\u6784\u5efa\u57fa\u7840\u7ed3\u6784\u4e0e",(0,i.jsx)(n.code,{children:"node"}),"\u7cfb\u7edf\u7248\u672c\u89e3\u8026\u7684",(0,i.jsx)(n.strong,{children:"\u63a8\u8350\u505a\u6cd5"}),"\u3002\u5982\u679c\u4e0e\u9ed8\u8ba4\u503c\u4e0d\u540c\uff0c\u5219\u5e94\u4f7f\u7528\u60a8\u81ea\u5df1\u7684\u8def\u5f84\u6216\u60a8\u81ea\u5df1\u7684",(0,i.jsx)(n.code,{children:"node"}),"\u7248\u672c\u7ba1\u7406\u5668\u6765\u81ea\u5b9a\u4e49\u6b64\u53d8\u91cf\u3002"]}),"\n",(0,i.jsxs)(n.p,{children:["\u6b64\u5916\uff0c\u60a8\u8fd8\u53ef\u4ee5\u5728\u6784\u5efa\u811a\u672c\u9636\u6bb5\u4e2d\u6dfb\u52a0\u4efb\u4f55\u5176\u4ed6\u73af\u5883\u53d8\u91cf\u5e76\u5bfc\u5165 ",(0,i.jsx)(n.code,{children:".xcode.env"})," \u6587\u4ef6\u3002\u5982\u679c\u60a8\u9700\u8981\u8fd0\u884c\u9700\u8981\u7279\u5b9a\u73af\u5883\u7684\u811a\u672c\uff0c\u8fd9\u4e5f\u662f\u5c06\u6784\u5efa\u9636\u6bb5\u4e0e\u7279\u5b9a\u73af\u5883\u89e3\u8026\u7684",(0,i.jsx)(n.strong,{children:"\u63a8\u8350\u505a\u6cd5"}),"\u3002"]}),"\n",(0,i.jsx)(n.h2,{id:"\u7f16\u8bd1\u5e76\u8fd0\u884c-react-native-\u5e94\u7528",children:"\u7f16\u8bd1\u5e76\u8fd0\u884c React Native \u5e94\u7528"}),"\n",(0,i.jsxs)(n.p,{children:["\u5728\u4f60\u7684\u9879\u76ee\u76ee\u5f55\u4e2d\u8fd0\u884c",(0,i.jsx)(n.code,{children:"yarn ios"}),"\u6216\u8005",(0,i.jsx)(n.code,{children:"yarn react-native run-ios"}),"\uff1a"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-sh",children:"cd AwesomeProject\nyarn ios\n# \u6216\u8005\nyarn react-native run-ios\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u6b64\u547d\u4ee4\u4f1a\u5bf9\u9879\u76ee\u7684\u539f\u751f\u90e8\u5206\u8fdb\u884c\u7f16\u8bd1\uff0c\u540c\u65f6\u5728\u53e6\u5916\u4e00\u4e2a\u547d\u4ee4\u884c\u4e2d\u542f\u52a8",(0,i.jsx)(n.code,{children:"Metro"}),"\u670d\u52a1\u5bf9 js \u4ee3\u7801\u8fdb\u884c\u5b9e\u65f6\u6253\u5305\u5904\u7406\uff08\u7c7b\u4f3c webpack\uff09\u3002",(0,i.jsx)(n.code,{children:"Metro"}),"\u670d\u52a1\u4e5f\u53ef\u4ee5\u4f7f\u7528",(0,i.jsx)(n.code,{children:"yarn start"}),"\u547d\u4ee4\u5355\u72ec\u542f\u52a8\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u63d0\u793a\uff1a\u5982\u679c\u6b64\u547d\u4ee4\u65e0\u6cd5\u6b63\u5e38\u8fd0\u884c\uff0c\u8bf7\u4f7f\u7528 Xcode \u8fd0\u884c\u6765\u67e5\u770b\u5177\u4f53\u9519\u8bef\uff08run-ios \u7684\u62a5\u9519\u6ca1\u6709\u4efb\u4f55\u5177\u4f53\u4fe1\u606f\uff09\u3002\u6ce8\u610f 0.60 \u7248\u672c\u4e4b\u540e\u7684\u4e3b\u9879\u76ee\u6587\u4ef6\u662f",(0,i.jsx)(n.code,{children:".xcworkspace"}),"\uff0c\u4e0d\u662f",(0,i.jsx)(n.code,{children:".xcodeproj"}),"\uff01"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"\u5f88\u5feb\u5c31\u5e94\u8be5\u80fd\u770b\u5230 iOS \u6a21\u62df\u5668\u81ea\u52a8\u542f\u52a8\u5e76\u8fd0\u884c\u4f60\u7684\u9879\u76ee\u3002"}),"\n",(0,i.jsxs)(n.p,{children:["\u5728\u6b63\u5e38\u7f16\u8bd1\u5b8c\u6210\u540e\uff0c\u5f00\u53d1\u671f\u95f4\u8bf7\u4fdd\u6301",(0,i.jsx)(n.code,{children:"Metro"}),"\u547d\u4ee4\u884c\u7a97\u53e3\u8fd0\u884c\u800c\u4e0d\u8981\u5173\u95ed\u3002\u4ee5\u540e\u9700\u8981\u518d\u6b21\u8fd0\u884c\u9879\u76ee\u65f6\uff0c\u5982\u679c\u6ca1\u6709\u4fee\u6539\u8fc7 ios \u76ee\u5f55\u4e2d\u7684\u4efb\u4f55\u6587\u4ef6\uff0c\u5219\u53ea\u9700\u5355\u72ec\u542f\u52a8",(0,i.jsx)(n.code,{children:"yarn start"}),"\u547d\u4ee4\u3002\u5982\u679c\u5bf9 ios \u76ee\u5f55\u4e2d\u4efb\u4f55\u6587\u4ef6\u6709\u4fee\u6539\uff0c\u5219\u9700\u8981\u518d\u6b21\u8fd0\u884c",(0,i.jsx)(n.code,{children:"yarn ios"}),"\u547d\u4ee4\u5b8c\u6210\u539f\u751f\u90e8\u5206\u7684\u7f16\u8bd1\u3002"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"AwesomeProject on iOS",src:r(45757).Z+"",width:"249",height:"493"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"yarn ios"}),"\u53ea\u662f\u8fd0\u884c\u5e94\u7528\u7684\u65b9\u5f0f\u4e4b\u4e00\u3002\u4f60\u4e5f\u53ef\u4ee5\u5728 Xcode \u4e2d\u76f4\u63a5\u8fd0\u884c\u5e94\u7528\u3002\u6ce8\u610f 0.60 \u7248\u672c\u4e4b\u540e\u7684\u4e3b\u9879\u76ee\u6587\u4ef6\u662f",(0,i.jsx)(n.code,{children:".xcworkspace"}),"\uff0c\u4e0d\u662f",(0,i.jsx)(n.code,{children:".xcodeproj"}),"\u3002"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u65e0\u6cd5\u6b63\u5e38\u8fd0\u884c\uff0c\u5148\u56de\u5934",(0,i.jsx)(n.code,{children:"\u4ed4\u7ec6\u5bf9\u7167\u6587\u6863\u68c0\u67e5"}),"\uff0c\u7136\u540e\u53ef\u4ee5\u770b\u770b",(0,i.jsx)(n.a,{href:"https://github.com/reactnativecn/react-native-website/issues",children:"\u8ba8\u8bba\u533a"}),"\u3002"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"\u5728\u771f\u673a\u4e0a\u8fd0\u884c",children:"\u5728\u771f\u673a\u4e0a\u8fd0\u884c"}),"\n",(0,i.jsxs)(n.p,{children:["\u4e0a\u9762\u7684\u547d\u4ee4\u4f1a\u81ea\u52a8\u5728 iOS \u6a21\u62df\u5668\u4e0a\u8fd0\u884c\u5e94\u7528\uff0c\u5982\u679c\u4f60\u60f3\u5728\u771f\u673a\u4e0a\u8fd0\u884c\uff0c\u5219\u8bf7\u9605\u8bfb",(0,i.jsx)(n.a,{href:"/docs/next/running-on-device",children:"\u5728\u8bbe\u5907\u4e0a\u8fd0\u884c"}),"\u8fd9\u7bc7\u6587\u6863\u3002"]}),"\n",(0,i.jsx)(n.h3,{id:"\u4fee\u6539\u9879\u76ee",children:"\u4fee\u6539\u9879\u76ee"}),"\n",(0,i.jsx)(n.p,{children:"\u73b0\u5728\u4f60\u5df2\u7ecf\u6210\u529f\u8fd0\u884c\u4e86\u9879\u76ee\uff0c\u6211\u4eec\u53ef\u4ee5\u5f00\u59cb\u5c1d\u8bd5\u52a8\u624b\u6539\u4e00\u6539\u4e86\uff1a"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\u4f7f\u7528\u4f60\u559c\u6b22\u7684\u7f16\u8f91\u5668\u6253\u5f00",(0,i.jsx)(n.code,{children:"App.js"}),"\u5e76\u968f\u4fbf\u6539\u4e0a\u51e0\u884c\u3002"]}),"\n",(0,i.jsxs)(n.li,{children:["\u5728 iOS \u6a21\u62df\u5668\u4e2d\u6309\u4e0b",(0,i.jsx)(n.code,{children:"\u2318-R"}),"\u5c31\u53ef\u4ee5\u5237\u65b0 APP \u5e76\u770b\u5230\u4f60\u7684\u6700\u65b0\u4fee\u6539\uff01\uff08\u5982\u679c\u6ca1\u6709\u53cd\u5e94\uff0c\u8bf7\u68c0\u67e5\u6a21\u62df\u5668\u7684 Hardware \u83dc\u5355\u4e2d\uff0cconnect hardware keyboard \u9009\u9879\u662f\u5426\u9009\u4e2d\u5f00\u542f\uff09"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"\u5b8c\u6210\u4e86",children:"\u5b8c\u6210\u4e86\uff01"}),"\n",(0,i.jsx)(n.p,{children:"\u606d\u559c\uff01\u4f60\u5df2\u7ecf\u6210\u529f\u8fd0\u884c\u5e76\u4fee\u6539\u4e86\u4f60\u7684\u7b2c\u4e00\u4e2a React Native \u5e94\u7528\u3002"}),"\n",(0,i.jsx)("center",{children:(0,i.jsx)("img",{src:"https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/GettingStartedCongratulations.png",width:"150"})}),"\n",(0,i.jsx)(n.h2,{id:"\u63a5\u4e0b\u6765",children:"\u63a5\u4e0b\u6765\uff1f"}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u60f3\u628a React Native \u96c6\u6210\u5230\u73b0\u6709\u7684\u539f\u751f\u9879\u76ee\u4e2d\uff0c\u5219\u8bf7\u53c2\u8003",(0,i.jsx)(n.a,{href:"/docs/next/integration-with-existing-apps",children:"\u96c6\u6210\u5230\u73b0\u6709\u539f\u751f\u5e94\u7528"}),"\u3002"]}),"\n",(0,i.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u60f3\u4ece\u5934\u5f00\u59cb\u5b66\u4e60 React Native \u5f00\u53d1\uff0c\u53ef\u4ee5\u4ece",(0,i.jsx)(n.a,{href:"/docs/next/environment-setup",children:"\u7b80\u4ecb"}),"\u6587\u6863\u5f00\u59cb\u3002"]})]})}function b(e={}){const{wrapper:n}={...(0,d.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(A,{...e})}):A(e)}const f={id:"environment-setup",title:"\u642d\u5efa\u5f00\u53d1\u73af\u5883",hide_table_of_contents:!0},w=void 0,S={id:"environment-setup",title:"\u642d\u5efa\u5f00\u53d1\u73af\u5883",description:"\u6b22\u8fce\u4f7f\u7528 React Native\uff01\u8fd9\u7bc7\u6587\u6863\u4f1a\u5e2e\u52a9\u4f60\u642d\u5efa\u57fa\u672c\u7684 React Native \u5f00\u53d1\u73af\u5883\u3002",source:"@site/../cndocs/getting-started.md",sourceDirName:".",slug:"/environment-setup",permalink:"/docs/next/environment-setup",draft:!1,unlisted:!1,editUrl:"https://github.com/reactnativecn/react-native-website/blob/production/cnwebsite/../cndocs/getting-started.md",tags:[],version:"current",frontMatter:{id:"environment-setup",title:"\u642d\u5efa\u5f00\u53d1\u73af\u5883",hide_table_of_contents:!0},sidebar:"docs",previous:{title:"\u5176\u4ed6\u53c2\u8003\u8d44\u6e90",permalink:"/docs/next/more-resources"},next:{title:"\u96c6\u6210\u5230\u73b0\u6709\u539f\u751f\u5e94\u7528",permalink:"/docs/next/integration-with-existing-apps"}},N={},y=[{value:"\u5f00\u53d1\u5e73\u53f0",id:"\u5f00\u53d1\u5e73\u53f0",level:4},{value:"\u76ee\u6807\u5e73\u53f0",id:"\u76ee\u6807\u5e73\u53f0",level:4},...x,...g,{value:"\u76ee\u6807\u5e73\u53f0",id:"\u76ee\u6807\u5e73\u53f0-1",level:4},...u,{value:"\u6682\u4e0d\u652f\u6301",id:"\u6682\u4e0d\u652f\u6301",level:2},{value:"\u76ee\u6807\u5e73\u53f0",id:"\u76ee\u6807\u5e73\u53f0-2",level:4},...a,{value:"\u6682\u4e0d\u652f\u6301",id:"\u6682\u4e0d\u652f\u6301-1",level:2}];function k(e){const n={a:"a",blockquote:"blockquote",code:"code",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,d.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"\u6b22\u8fce\u4f7f\u7528 React Native\uff01\u8fd9\u7bc7\u6587\u6863\u4f1a\u5e2e\u52a9\u4f60\u642d\u5efa\u57fa\u672c\u7684 React Native \u5f00\u53d1\u73af\u5883\u3002"}),"\n",(0,i.jsxs)(s.Z,{groupId:"guide",defaultValue:l.Z.defaultGuide,values:l.Z.guides,children:[(0,i.jsxs)(c.Z,{value:"quickstart",children:[(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"\u8bd1\u6ce8\uff1a\u6c99\u76d2\u73af\u5883\u5927\u91cf\u4f9d\u8d56\u4e8e\u56fd\u5916\u7f51\u7edc\u73af\u5883\uff0c\u4e5f\u4e0d\u80fd\u76f4\u63a5\u5b89\u88c5\u7b2c\u4e09\u65b9\u539f\u751f\u7ec4\u4ef6\u3002\u4e0d\u5efa\u8bae\u56fd\u5185\u7528\u6237\u4f7f\u7528"}),"\n"]}),(0,i.jsxs)(n.p,{children:["Assuming that you have ",(0,i.jsx)(n.a,{href:"https://nodejs.org/en/download/",children:"Node 12 LTS"})," or greater installed, you can use npm to install the Expo CLI command line utility:"]}),(0,i.jsxs)(s.Z,{groupId:"package-manager",defaultValue:l.Z.defaultPackageManager,values:l.Z.packageManagers,children:[(0,i.jsx)(c.Z,{value:"npm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npm install -g expo-cli\n"})})}),(0,i.jsx)(c.Z,{value:"yarn",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"yarn global add expo-cli\n"})})})]}),(0,i.jsx)(n.p,{children:'Then run the following commands to create a new React Native project called "AwesomeProject":'}),(0,i.jsxs)(s.Z,{groupId:"package-manager",defaultValue:l.Z.defaultPackageManager,values:l.Z.packageManagers,children:[(0,i.jsx)(c.Z,{value:"npm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"expo init AwesomeProject\n\ncd AwesomeProject\nnpm start # you can also use: expo start\n"})})}),(0,i.jsx)(c.Z,{value:"yarn",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"expo init AwesomeProject\n\ncd AwesomeProject\nyarn start # you can also use: expo start\n"})})})]}),(0,i.jsx)(n.p,{children:"This will start a development server for you."}),(0,i.jsx)("h2",{children:"Running your React Native application"}),(0,i.jsxs)(n.p,{children:["Install the ",(0,i.jsx)(n.a,{href:"https://expo.io",children:"Expo"})," client app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the Camera app."]}),(0,i.jsx)("h3",{children:"Modifying your app"}),(0,i.jsxs)(n.p,{children:["Now that you have successfully run the app, let's modify it. Open ",(0,i.jsx)(n.code,{children:"App.js"})," in your text editor of choice and edit some lines. The application should reload automatically once you save your changes."]}),(0,i.jsx)("h3",{children:"That's it!"}),(0,i.jsx)(n.p,{children:"Congratulations! You've successfully run and modified your first React Native app."}),(0,i.jsx)("center",{children:(0,i.jsx)("img",{src:"https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/GettingStartedCongratulations.png",width:"150"})}),(0,i.jsx)("h2",{children:"Now what?"}),(0,i.jsxs)(n.p,{children:["Expo also has ",(0,i.jsx)(n.a,{href:"https://docs.expo.io",children:"docs"})," you can reference if you have questions specific to the tool. You can also ask for help at ",(0,i.jsx)(n.a,{href:"https://forums.expo.io",children:"Expo forums"}),"."]}),(0,i.jsxs)(n.p,{children:["These tools help you get started quickly, but before committing to building your app with Expo CLI, ",(0,i.jsx)(n.a,{href:"https://docs.expo.io/versions/latest/introduction/why-not-expo/",children:"read about the limitations"}),"."]}),(0,i.jsx)(n.p,{children:"If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:"}),(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["in the ",(0,i.jsx)(n.a,{href:"https://github.com/expo/expo-cli/issues",children:"Expo CLI issues"})," (for issues related to Expo CLI), or"]}),"\n",(0,i.jsxs)(n.li,{children:["in the ",(0,i.jsx)(n.a,{href:"https://github.com/expo/expo/issues",children:"Expo issues"})," (for issues about the Expo client or SDK)."]}),"\n"]}),(0,i.jsxs)(n.p,{children:["If you're curious to learn more about React Native, check out the ",(0,i.jsx)(n.a,{href:"getting-started",children:"Introduction to React Native"}),"."]}),(0,i.jsx)("h3",{children:"Running your app on a simulator or virtual device"}),(0,i.jsx)(n.p,{children:'Expo CLI allows you to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.'}),(0,i.jsxs)(n.p,{children:["Once you've set these up, you can launch your app on an Android Virtual Device by running ",(0,i.jsx)(n.code,{children:"npm run android"}),", or on the iOS Simulator by running ",(0,i.jsx)(n.code,{children:"npm run ios"})," (macOS only)."]}),(0,i.jsx)("h3",{children:"Caveats"}),(0,i.jsx)(n.p,{children:"Because you don't build any native code when using Expo to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app."}),(0,i.jsxs)(n.p,{children:["If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll need to \"",(0,i.jsx)(n.a,{href:"https://docs.expo.io/versions/latest/workflow/customizing/",children:"eject"}),'" eventually to create your own native builds. If you do eject, the "React Native CLI Quickstart" instructions will be required to continue working on your project.']}),(0,i.jsxs)(n.p,{children:["Expo CLI configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check ",(0,i.jsx)(n.a,{href:"https://docs.expo.io/versions/latest/sdk/overview/#sdk-version",children:"this document"})," to find out what versions are supported."]}),(0,i.jsx)(n.p,{children:"If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select \"React Native CLI Quickstart\" above for instructions on configuring a native build environment for React Native."})]}),(0,i.jsxs)(c.Z,{value:"native",children:[(0,i.jsx)(n.p,{children:"\u6839\u636e\u4f60\u6240\u4f7f\u7528\u7684\u64cd\u4f5c\u7cfb\u7edf\u3001\u9488\u5bf9\u7684\u76ee\u6807\u5e73\u53f0\u4e0d\u540c\uff0c\u5177\u4f53\u6b65\u9aa4\u6709\u6240\u4e0d\u540c\u3002\u5982\u679c\u60f3\u540c\u65f6\u5f00\u53d1 iOS \u548c Android \u4e5f\u6ca1\u95ee\u9898\uff0c\u4f60\u53ea\u9700\u8981\u5148\u9009\u4e00\u4e2a\u5e73\u53f0\u5f00\u59cb\uff0c\u53e6\u4e00\u4e2a\u5e73\u53f0\u7684\u73af\u5883\u642d\u5efa\u53ea\u662f\u7a0d\u6709\u4e0d\u540c\u3002"}),(0,i.jsxs)(n.p,{children:["\u5982\u679c",(0,i.jsx)(n.code,{children:"\u9605\u8bfb\u5b8c\u672c\u6587\u6863"}),"\u540e\u8fd8\u78b0\u5230\u5f88\u591a\u73af\u5883\u642d\u5efa\u7684\u95ee\u9898\uff0c\u6211\u4eec\u5efa\u8bae\u4f60\u8fd8\u53ef\u4ee5\u518d\u770b\u770b",(0,i.jsx)(n.a,{href:"https://github.com/reactnativecn/react-native-website/issues",children:"\u6c42\u52a9\u8ba8\u8bba\u533a"}),"\u3002\u6ce8\u610f\uff01\u89c6\u9891\u6559\u7a0b\u6216\u8005\u5176\u4ed6\u7f51\u7edc\u4e0a\u7684\u535a\u5ba2\u548c\u6587\u7ae0\u53ef\u80fd\u548c\u672c\u6587\u6863\u6709\u6240\u51fa\u5165\uff0c\u8bf7\u4ee5\u6700\u65b0\u7248\u672c\u7684\u672c\u6587\u6863\u6240\u8ff0\u4e3a\u51c6\uff01"]}),(0,i.jsx)(n.h4,{id:"\u5f00\u53d1\u5e73\u53f0",children:"\u5f00\u53d1\u5e73\u53f0"}),(0,i.jsxs)(s.Z,{groupId:"os",defaultValue:l.Z.defaultOs,values:l.Z.oses,className:"pill-tabs",children:[(0,i.jsxs)(c.Z,{value:"macos",children:[(0,i.jsx)(n.h4,{id:"\u76ee\u6807\u5e73\u53f0",children:"\u76ee\u6807\u5e73\u53f0"}),(0,i.jsxs)(s.Z,{groupId:"platform",defaultValue:l.Z.defaultPlatform,values:l.Z.platforms,className:"pill-tabs",children:[(0,i.jsx)(c.Z,{value:"android",children:(0,i.jsx)(p,{})}),(0,i.jsx)(c.Z,{value:"ios",children:(0,i.jsx)(b,{})})]})]}),(0,i.jsxs)(c.Z,{value:"windows",children:[(0,i.jsx)(n.h4,{id:"\u76ee\u6807\u5e73\u53f0-1",children:"\u76ee\u6807\u5e73\u53f0"}),(0,i.jsxs)(s.Z,{groupId:"platform",defaultValue:l.Z.defaultPlatform,values:l.Z.platforms,className:"pill-tabs",children:[(0,i.jsx)(c.Z,{value:"android",children:(0,i.jsx)(m,{})}),(0,i.jsxs)(c.Z,{value:"ios",children:[(0,i.jsx)(n.h2,{id:"\u6682\u4e0d\u652f\u6301",children:"\u6682\u4e0d\u652f\u6301"}),(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u82f9\u679c\u516c\u53f8\u76ee\u524d\u53ea\u5141\u8bb8\u5728 Mac \u7535\u8111\u4e0a\u5f00\u53d1 iOS \u5e94\u7528\u3002\u5982\u679c\u4f60\u6ca1\u6709 Mac \u7535\u8111\uff0c\u90a3\u4e48\u53ea\u80fd\u8003\u8651\u4f7f\u7528",(0,i.jsx)(n.code,{children:"\u6c99\u76d2\u73af\u5883"}),"\uff0c\u6216\u8005\u5148\u5f00\u53d1 Android \u5e94\u7528\u4e86\u3002"]}),"\n"]})]})]})]}),(0,i.jsxs)(c.Z,{value:"linux",children:[(0,i.jsx)(n.h4,{id:"\u76ee\u6807\u5e73\u53f0-2",children:"\u76ee\u6807\u5e73\u53f0"}),(0,i.jsxs)(s.Z,{groupId:"platform",defaultValue:l.Z.defaultPlatform,values:l.Z.platforms,className:"pill-tabs",children:[(0,i.jsx)(c.Z,{value:"android",children:(0,i.jsx)(h,{})}),(0,i.jsxs)(c.Z,{value:"ios",children:[(0,i.jsx)(n.h2,{id:"\u6682\u4e0d\u652f\u6301-1",children:"\u6682\u4e0d\u652f\u6301"}),(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["\u82f9\u679c\u516c\u53f8\u76ee\u524d\u53ea\u5141\u8bb8\u5728 Mac \u7535\u8111\u4e0a\u5f00\u53d1 iOS \u5e94\u7528\u3002\u5982\u679c\u4f60\u6ca1\u6709 Mac \u7535\u8111\uff0c\u90a3\u4e48\u53ea\u80fd\u8003\u8651\u4f7f\u7528",(0,i.jsx)(n.code,{children:"\u6c99\u76d2\u73af\u5883"}),"\uff0c\u6216\u8005\u5148\u5f00\u53d1 Android \u5e94\u7528\u4e86\u3002"]}),"\n"]})]})]})]})]})]})]})]})}function D(e={}){const{wrapper:n}={...(0,d.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(k,{...e})}):k(e)}},11674:(e,n,r)=>{r.d(n,{Z:()=>c});var i=r(63445);const d=!!i.Z.canUseDOM&&navigator.platform.startsWith("Mac"),s=!!i.Z.canUseDOM&&navigator.platform.startsWith("Win"),c={defaultGuide:"native",defaultOs:d?"macos":s?"windows":"linux",defaultPackageManager:"npm",defaultPlatform:d?"ios":"android",defaultSyntax:"functional",getDevNotesTabs:(e=["android","ios","web","windows"])=>[e.includes("android")?{label:"Android",value:"android"}:void 0,e.includes("ios")?{label:"iOS",value:"ios"}:void 0,e.includes("web")?{label:"Web",value:"web"}:void 0,e.includes("windows")?{label:"Windows",value:"windows"}:void 0].filter(Boolean),guides:[{label:"\u5b8c\u6574\u539f\u751f\u73af\u5883",value:"native"},{label:"\u7b80\u6613\u6c99\u76d2\u73af\u5883",value:"quickstart"}],oses:[{label:"macOS",value:"macos"},{label:"Windows",value:"windows"},{label:"Linux",value:"linux"}],packageManagers:[{label:"npm",value:"npm"},{label:"Yarn",value:"yarn"}],platforms:[{label:"Android",value:"android"},{label:"iOS",value:"ios"}],syntax:[{label:"\u51fd\u6570\u5f0f\u7ec4\u4ef6",value:"functional"},{label:"Class \u7ec4\u4ef6",value:"classical"}]}},86386:(e,n,r)=>{r.d(n,{Z:()=>x});var i=r(27378),d=r(40624);const s={tabItem:"tabItem_wHwb"};var c=Object.defineProperty,l=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable,t=(e,n,r)=>n in e?c(e,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[n]=r,h=(e,n)=>{for(var r in n||(n={}))o.call(n,r)&&t(e,r,n[r]);if(l)for(var r of l(n))a.call(n,r)&&t(e,r,n[r]);return e};function x({children:e,hidden:n,className:r}){return i.createElement("div",h({role:"tabpanel",className:(0,d.Z)(s.tabItem,r)},{hidden:n}),e)}},48375:(e,n,r)=>{r.d(n,{Z:()=>Y});var i=r(27378),d=r(40624),s=r(12112),c=r(3620),l=r(69490),o=r(14953),a=r(27886),t=r(7106),h=Object.defineProperty,x=Object.defineProperties,j=Object.getOwnPropertyDescriptors,p=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable,m=(e,n,r)=>n in e?h(e,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[n]=r,g=(e,n)=>{for(var r in n||(n={}))u.call(n,r)&&m(e,r,n[r]);if(p)for(var r of p(n))v.call(n,r)&&m(e,r,n[r]);return e},A=(e,n)=>x(e,j(n));function b(e){var n,r;return null!=(r=null==(n=i.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,i.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad-必须要看的注意事项:请
不要
单独使用常见的关键字作为项目名(如 class, native, new, package 等等)。请不要
使用与核心模块同名的项目名(如 react, react-native 等)。请不要
在目录、文件名中使用中文、空格等特殊符号。
npx react-native@latest init AwesomeProject
npx @react-native-community/clilatest init AwesomeProject
如果你是想把 React Native 集成到现有的原生项目中,则步骤完全不同,请参考集成到现有原生应用。
你可以使用--version
参数(注意是两
个杠)创建指定版本的项目。例如:
npx react-native@X.XX.X init AwesomeProject --version X.XX.X
npx @react-native-community/cliX.XX.X init AwesomeProject --version X.XX.X
还可以使用--template
参数来使用一些社区提供的模板。
你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机,也可以是模拟器。后面我们所有的文档除非特别说明,并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device(简称 AVD)的模拟器。此外还有很多第三方提供的模拟器如Genymotion、BlueStack 等。一般来说官方模拟器免费、功能完整,但性能较差。第三方模拟器性能较好,但可能需要付费,或带有广告。
@@ -190,7 +190,7 @@npm uninstall -g react-native-cli @react-native-community/cli
使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装,可以直接用 node 自带的npx
命令来使用(注意 init 命令默认会创建最新的版本):
npx react-native@latest init AwesomeProject
npx @react-native-community/clilatest init AwesomeProject
@@ -200,11 +200,11 @@注意一:请
不要
在目录、文件名中使用中文、空格等特殊符号。请不要
单独使用常见的关键字作为项目名(如 class, native, new, package 等等)。请不要
使用与核心模块同名的项目名(如 react, react-native 等)。
如果你是想把 React Native 集成到现有的原生项目中,则步骤完全不同,请参考集成到现有原生应用。
你可以使用--version
参数(注意是两
个杠)创建指定版本的项目。注意版本号必须精确到两个小数点。
npx react-native@X.XX.X init AwesomeProject --version X.XX.X
npx @react-native-community/cliX.XX.X init AwesomeProject --version X.XX.X
还可以使用--template
来使用一些社区提供的模板。
从 React Native 版本 0.69 开始,可以使用模板提供的 .xcode.env
文件来配置 Xcode 环境。
.xcode.env
文件中包含一个环境变量示 例,用于在 NODE_BINARY
变量中导出 node
执行文件的路径。这是将构建基础结构与node
系统版本解耦的推荐做法。如果与默认值不同,则应使用您自己的路径或您自己的node
版本管理器来自定义此变量。
.xcode.env
文件中包含一个环境变量示例,用于在 NODE_BINARY
变量中导出 node
执行文件的路径。这是将构建基础结构与node
系统版本解耦的推荐做法。如果与默认值不同,则应使用您自己的路径或您自己的node
版本管理器来自定义此变量。
此外,您还可以在构建脚本阶段中添加任何其他环境变量并导入 .xcode.env
文件。如果您需要运行需要特定环境的脚本,这也是将构建阶段与特定环境解耦的推荐做法。
在你的项目目录中运行yarn ios
或者yarn react-native run-ios
:
上面的命令会自动在 iOS 模拟器上运行应用,如果你想在真机上运行,则请阅读在设备上运行这篇文档。
现在你已经成功运行了项目,我们可以开始尝试动手改一改了:
@@ -233,7 +233,7 @@如果你想把 React Native 集成到现有的原生项目中,则请参考集成到现有原生应用。
-如果你想从头开始学习 React Native 开发,可以从简介文档开始。