{"id":477,"date":"2023-02-25T13:49:06","date_gmt":"2023-02-25T05:49:06","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=477"},"modified":"2023-04-29T20:54:01","modified_gmt":"2023-04-29T12:54:01","slug":"react-native-learning-build-development-environment","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-learning-build-development-environment\/","title":{"rendered":"React Native\u5b66\u4e60\u4e4b\u642d\u5efa\u5f00\u53d1\u73af\u5883"},"content":{"rendered":"<h2>\u5b89\u88c5\u8f6f\u4ef6<\/h2>\n<h3>C++\u73af\u5883<\/h3>\n<p>\u7f16\u8bd1node.js\u7684C++\u6a21\u5757\u9700\u8981\u7528\u5230\u3002<\/p>\n<p>Visual C++ Redistributable Packages for Visual Studio 2013\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/www.microsoft.com\/en-gb\/download\/details.aspx?id=40784\">https:\/\/www.microsoft.com\/en-gb\/download\/details.aspx?id=40784<\/a><\/p>\n<p><!-- more --><\/p>\n<h3>Chocolatey<\/h3>\n<p>\u5b98\u65b9\u7f51\u7ad9\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/chocolatey.org\/\">https:\/\/chocolatey.org\/<\/a><\/p>\n<p>Chocolatey\u662f\u4e00\u4e2aWindows\u4e0a\u7684\u5305\u7ba1\u7406\u5668\uff0c\u7c7b\u4f3c\u4e8eLinux\u4e0a\u7684yum\u548capt-get\u3002\u4f60\u53ef\u4ee5\u5728\u5176\u5b98\u65b9\u7f51\u7ad9\u4e0a\u67e5\u770b\u5177\u4f53\u7684\u4f7f\u7528\u8bf4\u660e\u3002\u4e00\u822c\u7684\u5b89\u88c5\u6b65\u9aa4\u5e94\u8be5\u662f\u4e0b\u9762\u8fd9\u6837\uff1a<\/p>\n<pre><code>@powershell -NoProfile -ExecutionPolicy Bypass -Command &quot;iex ((new-object net.webclient).DownloadString(&#039;https:\/\/chocolatey.org\/install.ps1&#039;))&quot; &amp;&amp; SET PATH=%PATH%;%ALLUSERSPROFILE%\\chocolatey\\bin<\/code><\/pre>\n<blockquote>\n<p>\u4e00\u822c\u6765\u8bf4\uff0c\u4f7f\u7528Chocolatey\u6765\u5b89\u88c5\u8f6f\u4ef6\u7684\u65f6\u5019\uff0c\u9700\u8981\u4ee5\u7ba1\u7406\u5458\u7684\u8eab\u4efd\u6765\u8fd0\u884c\u547d\u4ee4\u63d0\u793a\u7b26\u7a97\u53e3\u3002<\/p>\n<\/blockquote>\n<h3>Python 2<\/h3>\n<p>\u6253\u5f00\u547d\u4ee4\u63d0\u793a\u7b26\u7a97\u53e3\uff0c\u4f7f\u7528Chocolatey\u6765\u5b89\u88c5Python 2\u3002<\/p>\n<pre><code>choco install python2<\/code><\/pre>\n<blockquote>\n<p>\u6ce8\u610f\u76ee\u524d\u4e0d\u652f\u6301Python 3\u7248\u672c\u3002<\/p>\n<\/blockquote>\n<h3>Node.js<\/h3>\n<p>Node.js \u662f\u4e00\u4e2a\u57fa\u4e8e Chrome V8 \u5f15\u64ce\u7684 JavaScript \u8fd0\u884c\u73af\u5883\u3002Node.js \u4f7f\u7528\u4e86\u4e00\u4e2a\u4e8b\u4ef6\u9a71\u52a8\u3001\u975e\u963b\u585e\u5f0f I\/O \u7684\u6a21\u578b\uff0c\u4f7f\u5176\u8f7b\u91cf\u53c8\u9ad8\u6548\u3002Node.js \u7684\u5305\u7ba1\u7406\u5668 npm\uff0c\u662f\u5168\u7403\u6700\u5927\u7684\u5f00\u6e90\u5e93\u751f\u6001\u7cfb\u7edf<\/p>\n<p>\u6253\u5f00\u547d\u4ee4\u63d0\u793a\u7b26\u7a97\u53e3\uff0c\u4f7f\u7528Chocolatey\u6765\u5b89\u88c5Node.js\u3002<\/p>\n<pre><code>choco install nodejs.install<\/code><\/pre>\n<p>\u5efa\u8bae\u8bbe\u7f6enpm\u955c\u50cf\u4ee5\u52a0\u901f\u7f51\u7edc\u4e0b\u8f7d<\/p>\n<pre><code>\/\/\u8bbe\u7f6enpm\u5168\u5c40\u955c\u50cf\uff1a\nnpm config set registry https:\/\/registry.npm.taobao.org\nnpm config set disturl https:\/\/npm.taobao.org\/dist<\/code><\/pre>\n<h3>React Native\u547d\u4ee4\u884c\u5de5\u5177\uff08react-native-cli\uff09<\/h3>\n<p>React Native\u7684\u547d\u4ee4\u884c\u5de5\u5177\u7528\u4e8e\u6267\u884c\u521b\u5efa\u3001\u521d\u59cb\u5316\u3001\u66f4\u65b0\u9879\u76ee\u3001\u8fd0\u884c\u6253\u5305\u670d\u52a1\uff08packager\uff09\u7b49\u4efb\u52a1\u3002<\/p>\n<pre><code>npm install -g react-native-cli<\/code><\/pre>\n<h3>Android Studio<\/h3>\n<p>React Native\u76ee\u524d\u9700\u8981Android Studio 2.0\u6216\u66f4\u9ad8\u7248\u672c\u3002Android Studio\u9700\u8981JDK1.8\u6216\u66f4\u9ad8\u7248\u672c\u3002<\/p>\n<p>\u6700\u65b0\u7248\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/sites.google.com\/a\/android.com\/tools\/download\/studio\/canary\/latest\">https:\/\/sites.google.com\/a\/android.com\/tools\/download\/studio\/canary\/latest<\/a><\/p>\n<p>\u9009\u62e9Custom\u5b89\u88c5\uff1a<\/p>\n<ul>\n<li>Android SDK<\/li>\n<li>Android SDK Platform<\/li>\n<li>HAXM \u52a0\u901f\u9a71\u52a8<\/li>\n<li>AVD \u6a21\u62df\u5668<\/li>\n<\/ul>\n<blockquote>\n<p>\u9664\u975e\u7279\u522b\u6ce8\u660e\uff0c\u8bf7\u4e0d\u8981\u6539\u52a8\u5b89\u88c5\u8fc7\u7a0b\u4e2d\u7684\u9009\u9879\u3002\u6bd4\u5982Android Studio\u9ed8\u8ba4\u5b89\u88c5 Android Support Repository\uff0c\u800c\u8fd9\u4e5f\u662fReact Native\u5fc5\u987b\u7684\uff08\u5426\u5219\u5728react-native run-android\u65f6\u4f1a\u62a5appcompat-v7\u5305\u627e\u4e0d\u5230\u7684\u9519\u8bef\uff09\u3002<\/p>\n<\/blockquote>\n<p>![Android Studio\u5b89\u88c5](<a target=\"_blank\" rel=\"noopener\" href=\"http:\/\/www.yezhou.me\/AppBlog\/images\/\u524d\u7aef\/ReactNative\u4e4bAndroid\">http:\/\/www.yezhou.me\/AppBlog\/images\/\u524d\u7aef\/ReactNative\u4e4bAndroid<\/a> Studio\u5b89\u88c5.png)<\/p>\n<p>\u6253\u5f00SDK Manager\uff1a<\/p>\n<ul>\n<li>\u5728SDK Platforms\u7a97\u53e3\u4e2d\uff0c\u9009\u62e9Show Package Details\uff0c\u7136\u540e\u5728Android 6.0 (Marshmallow)\u4e2d\u52fe\u9009Google APIs\u3001Intel x86 Atom System Image\u3001Intel x86 Atom_64 System Image\u4ee5\u53caGoogle APIs Intel x86 Atom_64 System Image\u3002<\/li>\n<li><strong>\u5728SDK Tools\u7a97\u53e3\u4e2d\uff0c\u9009\u62e9Show Package Details\uff0c\u7136\u540e\u5728Android SDK Build Tools\u4e2d\u52fe\u9009Android SDK Build-Tools 23.0.1\u3002\uff08\u5fc5\u987b\u662f\u8fd9\u4e2a\u7248\u672c\uff09<\/strong><\/li>\n<\/ul>\n<h3>Gradle Daemon\uff08\u53ef\u9009\uff09<\/h3>\n<p>\u5b98\u65b9\u7f51\u7ad9\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/gradle.org\/\">https:\/\/gradle.org\/<\/a><\/p>\n<p>\u5f00\u542fGradle Daemon\u53ef\u4ee5\u6781\u5927\u5730\u63d0\u5347java\u4ee3\u7801\u7684\u589e\u91cf\u7f16\u8bd1\u901f\u5ea6\u3002<\/p>\n<pre><code>(if not exist &quot;%USERPROFILE%\/.gradle&quot; mkdir &quot;%USERPROFILE%\/.gradle&quot;) &amp;&amp; (echo org.gradle.daemon=true &gt;&gt; &quot;%USERPROFILE%\/.gradle\/gradle.properties&quot;)<\/code><\/pre>\n<h3>Git\uff08\u53ef\u9009\uff09<\/h3>\n<p>\u53ef\u4ee5\u4f7f\u7528Chocolatey\u6765\u5b89\u88c5git\uff1a<\/p>\n<pre><code>choco install git<\/code><\/pre>\n<p>\u4e5f\u53ef\u4ee5\u76f4\u63a5\u4e0b\u8f7d<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/git-for-windows.github.io\/\">Git for Windows<\/a>\u3002 \u5728\u5b89\u88c5\u8fc7\u7a0b\u4e2d\u6ce8\u610f\u52fe\u9009&quot;Run Git from Windows Command Prompt&quot;\uff0c\u8fd9\u6837\u624d\u4f1a\u628agit\u547d\u4ee4\u6dfb\u52a0\u5230PATH\u73af\u5883\u53d8\u91cf\u4e2d\u3002<\/p>\n<h2>\u914d\u7f6e\u73af\u5883<\/h2>\n<h3>ANDROID_HOME\u73af\u5883\u53d8\u91cf<\/h3>\n<p>\u786e\u4fddANDROID_HOME\u73af\u5883\u53d8\u91cf\u6307\u5411Android SDK\u7684\u8def\u5f84\u3002<\/p>\n<pre><code>\u53d8\u91cf\u540d\uff1aANDROID_HOME\n\u53d8\u91cf\u503c\uff1aC:\\Users\\yezhou\\AppData\\Local\\Android\\Sdk<\/code><\/pre>\n<h3>\u5c06Android SDK\u7684Tools\u76ee\u5f55\u6dfb\u52a0\u5230PATH\u53d8\u91cf\u4e2d<\/h3>\n<p>\u5c06Android SDK\u7684 <strong>tools<\/strong> \u548c <strong>platform-tools<\/strong> \u76ee\u5f55\u6dfb\u52a0\u5230PATH\u53d8\u91cf\u4e2d\uff0c\u4ee5\u4fbf\u5728\u7ec8\u7aef\u4e2d\u8fd0\u884c\u4e00\u4e9bAndroid\u5de5\u5177\uff0c\u4f8b\u5982Android AVD\u6216\u662fadb logcat\u7b49\u3002<\/p>\n<h2>\u521b\u5efa\u9879\u76ee<\/h2>\n<pre><code>react-native init AwesomeProject\ncd AwesomeProject\nreact-native run-android  \/\/\u542f\u52a8react-native\u670d\u52a1\u7aef\u5e76\u7f16\u8bd1\u8fd0\u884cAPP\nreact-native start  \/\/\u4ec5\u542f\u52a8react-native\u670d\u52a1\u7aef<\/code><\/pre>\n<p>\u53ef\u4ee5\u4f7f\u7528\u6d4f\u89c8\u5668\u8bbf\u95ee\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"http:\/\/localhost:8081\/index.android.bundle?platform=android\">http:\/\/localhost:8081\/index.android.bundle?platform=android<\/a> \uff0c\u53ef\u4ee5\u770b\u5230\u6253\u5305\u540e\u7684\u811a\u672c\u3002<\/p>\n<h2>\u5f00\u53d1\u9879\u76ee<\/h2>\n<p>\u73b0\u5728\u5df2\u7ecf\u6210\u529f\u8fd0\u884c\u4e86\u9879\u76ee\uff0c\u6211\u4eec\u53ef\u4ee5\u5f00\u59cb\u5c1d\u8bd5\u52a8\u624b\u6539\u4e00\u6539\uff1a<\/p>\n<ul>\n<li>\u4f7f\u7528\u4f60\u559c\u6b22\u7684\u6587\u672c\u7f16\u8f91\u5668\u6253\u5f00index.android.js\u5e76\u968f\u4fbf\u6539\u4e0a\u51e0\u884c<\/li>\n<li>\u6309\u4e24\u4e0bR\u952e\uff0c\u6216\u662f\u7528Menu\u952e\uff08\u901a\u5e38\u662fF2\uff0c\u5728Genymotion\u6a21\u62df\u5668\u4e2d\u662f\u2318+M \uff0c\u5728\u771f\u673a\u4e2d\u53ef\u4ee5\u6447\u4e00\u6447\uff09\u6253\u5f00\u5f00\u53d1\u8005\u83dc\u5355\uff0c\u7136\u540e\u9009\u62e9 Reload JS \u5c31\u53ef\u4ee5\u770b\u5230\u4f60\u7684\u6700\u65b0\u4fee\u6539<\/li>\n<li>\u5728\u7ec8\u7aef\u4e0b\u8fd0\u884cadb logcat *:S ReactNative:V ReactNativeJS:V\u53ef\u4ee5\u770b\u5230\u4f60\u7684\u5e94\u7528\u7684\u65e5\u5fd7<\/li>\n<\/ul>\n<h2>\u8865\u5145\uff08\u53ef\u9009\uff09<\/h2>\n<h3>\u5b89\u88c5\u4e0eGit<\/h3>\n<p>Git\u5b98\u65b9\u4e0b\u8f7d\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/git-for-windows.github.io\/\">https:\/\/git-for-windows.github.io\/<\/a><\/p>\n<ul>\n<li>\u52fe\u9009\uff1a&quot;Use Git from Windows Command Prompt&quot;<\/li>\n<li>\u52fe\u9009\uff1a&quot;Checkout Windows-style, commit Unix-style line endings&quot;<\/li>\n<li>\u52fe\u9009\uff1a&quot;Use Windows&#8217;s default console window&quot;<\/li>\n<li>\u52fe\u9009\uff1a&quot;Enable file system caching&quot;<\/li>\n<\/ul>\n<h3>\u624b\u52a8\u5b89\u88c5React Native\u547d\u4ee4\u884c\u5de5\u5177<\/h3>\n<p>Github\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/github.com\/facebook\/react-native\">https:\/\/github.com\/facebook\/react-native<\/a><\/p>\n<pre><code>> cd react-native-master\n> cd react-native-cli\n> npm install -g react-native-cli<\/code><\/pre>\n<h3>\u6a21\u62df\u5668<\/h3>\n<h4>Genymotion<\/h4>\n<p>\u6bd4\u8d77Android Studio\u81ea\u5e26\u7684\u539f\u88c5\u6a21\u62df\u5668\uff0cGenymotion\u662f\u4e00\u4e2a\u6027\u80fd\u66f4\u597d\u7684\u9009\u62e9\uff0c\u4f46\u5b83\u53ea\u5bf9\u4e2a\u4eba\u7528\u6237\u514d\u8d39\u3002<\/p>\n<ul>\n<li>\u4e0b\u8f7d\u548c\u5b89\u88c5<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/www.genymotion.com\/\">Genymotion<\/a>\uff0cGenymotion\u9700\u8981\u4f9d\u8d56VirtualBox\u865a\u62df\u673a\uff0c\u4e0b\u8f7d\u9009\u9879\u4e2d\u63d0\u4f9b\u4e86\u5305\u542bVirtualBox\u548c\u4e0d\u5305\u542b\u7684\u9009\u9879\uff0c\u8bf7\u6309\u9700\u9009\u62e9\u3002<\/li>\n<li>\u6253\u5f00Genymotion\u3002\u5982\u679c\u4f60\u8fd8\u6ca1\u6709\u5b89\u88c5VirtualBox\uff0c\u5219\u6b64\u65f6\u4f1a\u63d0\u793a\u4f60\u5b89\u88c5\u3002<\/li>\n<li>\u521b\u5efa\u4e00\u4e2a\u65b0\u6a21\u62df\u5668\u5e76\u542f\u52a8\u3002<\/li>\n<li>\u542f\u52a8React Native\u5e94\u7528\u540e\uff0c\u53ef\u4ee5\u6309\u4e0bF1\u6765\u6253\u5f00\u5f00\u53d1\u8005\u83dc\u5355\u3002<\/li>\n<\/ul>\n<h4>Visual Studio Emulator for Android<\/h4>\n<p><a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/www.visualstudio.com\/zh-cn\/features\/msft-android-emulator-vs.aspx\">Visual Studio Emulator for Android<\/a>\u662f\u5229\u7528\u4e86Hyper-V\u6280\u672f\u8fdb\u884c\u786c\u4ef6\u52a0\u901f\u7684\u514d\u8d39android\u6a21\u62df\u5668\u3002\u4e5f\u662fAndroid Studio\u81ea\u5e26\u7684\u539f\u88c5\u6a21\u62df\u5668\u4e4b\u5916\u7684\u4e00\u4e2a\u5f88\u597d\u7684\u9009\u62e9\u3002\u800c\u4e14\u4f60\u5e76\u4e0d\u9700\u8981\u5b89\u88c5Visual Studio\u3002<\/p>\n<p>\u5728\u7528\u4e8eReact Native\u5f00\u53d1\u524d\uff0c\u9700\u8981\u5148\u5728\u6ce8\u518c\u8868\u4e2d\u8fdb\u884c\u4e00\u4e9b\u4fee\u6539\uff1a<\/p>\n<ul>\n<li>\u6253\u5f00\u8fd0\u884c\u547d\u4ee4\uff08\u6309\u4e0bWindows+R\u952e\uff09\uff0c\u8f93\u5165regedit.exe\u7136\u540e\u56de\u8f66<\/li>\n<li>\u5728\u6ce8\u518c\u8868\u7f16\u8f91\u5668\u4e2d\u627e\u5230HKEY_LOCAL_MACHINE\\SOFTWARE\\Wow6432Node\\Android SDK Tools\u6761\u76ee<\/li>\n<li>\u53f3\u952e\u70b9\u51fbAndroid SDK Tools\uff0c\u9009\u62e9\u65b0\u5efa &gt; \u5b57\u7b26\u4e32\u503c\uff0c\u540d\u79f0\u8bbe\u4e3aPath<\/li>\n<li>\u53cc\u51fbPath\uff0c\u5c06\u5176\u503c\u8bbe\u4e3a\u4f60\u7684Android SDK\u7684\u8def\u5f84<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u5b89\u88c5\u8f6f\u4ef6 C++\u73af\u5883 \u7f16\u8bd1node.js\u7684C++\u6a21\u5757\u9700\u8981\u7528\u5230\u3002 Visual C++ Redistributa [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[162],"class_list":["post-477","post","type-post","status-publish","format-standard","hentry","category-react-native","tag-react-native"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=477"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/477\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}