【React Native】React Native 的開發路(Windows 開發環境配置)
開發平臺環境（Windows）
1 必備的軟體 包括 vscode jdk python nodejs
andriodstudio五個軟體 ，下載找度娘
安裝C++環境
編譯node.js的C++模組需要用到
Windows SDK、mingw cygwin等C++環境。
安裝Node.js與Git
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm，是全球最大的開源庫生態系統
2 新增環境變數ANDROID_HOME , 值 Android\sdk 所在目錄
3 編輯PATH變數增加 ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools
下載msysgithttps：//git-for-windows.github.io/
建議設定npm映象
設定全域性使用指定的映象
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
4 拉取Hello World程式碼 開始吧
輸入命令
cmd視窗中
cd Desktop/ （可以指定儲存的路徑）
npm install -g react-native react-native init HelloWorld（專案名字）那麼桌面上就有資料夾是該工程的程式碼了 接下來直接開啟 Vistudio Coder 軟體開啟此資料夾 ， 安裝上外掛
即可編譯執行官方給出的demo專案了！
執行packager 進入工程目錄
react-native start
用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包後的指令碼
具體是這樣的
C:\Users\Administrator\Desktop\HelloWorld>npm Usage: npm <command> where <command> is one of: access, add-user, adduser, apihelp, author, bin, bugs, c, cache, completion, config, ddp, dedupe, deprecate, dist-tag, dist-tags, docs, edit, explore, faq, find, find-dupes, get, help, help-search, home, i, info, init, install, issues, la, link, list, ll, ln, login, logout, ls, outdated, owner, pack, ping, prefix, prune, publish, r, rb, rebuild, remove, repo, restart, rm, root, run-script, s, se, search, set, show, shrinkwrap, star, stars, start, stop, t, tag, team, test, tst, un, uninstall, unlink, unpublish, unstar, up, update, upgrade, v, version, view, whoami npm <cmd> -h quick help on <cmd> npm -l display full usage info npm faq commonly asked questions npm help <term> search for help on <term> npm help npm involved overview Specify configs in the ini-formatted file: C:\Users\Administrator\.npmrc or on the command line via: npm <command> --key value Config info can be viewed via: npm help config[email protected] I:\study\DevSoft\nodejs\node_modules\npm C:\Users\Administrator\Desktop\HelloWorld>react-native start ┌──────────────────────────────────────────────────── ────────────────────────┐ │ Running packager on port 8081. │ │ │ │ Keep this packager running while developing on any JS projects. Feel │ │ free to close this tab and run your own packager instance if you │ │ prefer. │ │ │ │ https://github.com/facebook/react-native │ │ │ └──────────────────────────────────────────────────── ────────────────────────┘ Looking for JS files in C:\Users\Administrator\Desktop\HelloWorld [00:30:29] <START> Building Dependency Graph [00:30:29] <START> Crawling File System [Hot Module Replacement] Server listening on /hot React packager ready. [00:30:46] <START> request:/index.android.bundle?platform=android [00:30:46] <START> find dependencies [00:33:03] <END> Crawling File System (153459ms) [00:33:03] <START> Building in-memory fs for JavaScript [00:33:04] <END> Building in-memory fs for JavaScript (1281ms) [00:33:04] <START> Building in-memory fs for Assets [00:33:05] <END> Building in-memory fs for Assets (974ms) [00:33:05] <START> Building Haste Map [00:33:05] <START> Building (deprecated) Asset Map [00:33:06] <END> Building (deprecated) Asset Map (205ms) [00:33:06] <END> Building Haste Map (817ms) [00:33:06] <END> Building Dependency Graph (156558ms) transformed 631/631 (100%) [00:33:25] <END> find dependencies (159165ms) [00:33:31] <END> request:/index.android.bundle?platform=android (165014ms) ::1 - - [13/Aug/2016:16:33:35 +0000] "GET /favicon.ico HTTP/1.1" 404 24 "http://localhost:8081/index.android.bundle?platform=android" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36" [00:45:29] <START> request:/index.android.bundle?platform=android [00:45:30] <END> request:/index.android.bundle?platform=android (39ms) ::ffff:192.168.31.241 - - [13/Aug/2016:16:45:35 +0000] "GET /favicon.ico HTTP/1.1" 404 24 "http://192.168.31.241:8081/index.android.bundle?platform=android" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36" 接下來另開一個cmd
模擬器或真機 執行android
react-native run-android
具體是這樣的
C:\Users\Administrator>cd C:\Users\Administrator\Desktop\HelloWorld
C:\Users\Administrator\Desktop\HelloWorld>react-native run-android
JS server already running.
Running F:\Andriod\sdk/platform-tools/adb reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && gradlew.bat installDebug...
Download https://jcenter.bintray.com/com/facebook/react/react-native/0.20.1/react-native-0.20.1.pom
Download https://jcenter.bintray.com/com/google/code/findbugs/jsr305/3.0.0/jsr305-3.0.0.pom
Download https://jcenter.bintray.com/org/webkit/android-jsc/r174650/android-jsc-r174650.pom
Download https://jcenter.bintray.com/com/squareup/okhttp3/okhttp-urlconnection/3.4.1/okhttp-urlconnection-3.4.1.pom
Download https://jcenter.bintray.com/com/squareup/okhttp3/parent/3.4.1/parent-3.4.1.pom
Download https://jcenter.bintray.com/com/facebook/fresco/imagepipeline-okhttp3/0.11.0/imagepipeline-okhttp3-0.11.0.pom
Download https://jcenter.bintray.com/com/fasterxml/jackson/core/jackson-core/2.2.3/jackson-core-2.2.3.pom
Download https://jcenter.bintray.com/com/fasterxml/oss-parent/10/oss-parent-10.pom
Download https://jcenter.bintray.com/com/squareup/okhttp3/okhttp-ws/3.4.1/okhttp-ws-3.4.1.pom
Download https://jcenter.bintray.com/com/squareup/okhttp3/okhttp/3.4.1/okhttp-3.4.1.pom
Download https://jcenter.bintray.com/com/squareup/okio/okio/1.9.0/okio-1.9.0.pom
Download https://jcenter.bintray.com/com/squareup/okio/okio-parent/1.9.0/okio-parent-1.9.0.pom
Download https://jcenter.bintray.com/com/facebook/fresco/fresco/0.11.0/fresco-0.11.0.pom
Download https://jcenter.bintray.com/com/facebook/soloader/soloader/0.1.0/soloader-0.1.0.pom
Download https://jcenter.bintray.com/com/facebook/fresco/fbcore/0.11.0/fbcore-0.11.0.pom
Download https://jcenter.bintray.com/com/facebook/fresco/imagepipeline/0.11.0/imagepipeline-0.11.0.pom
Download https://jcenter.bintray.com/com/facebook/fresco/drawee/0.11.0/drawee-0.11.0.pom
Download https://jcenter.bintray.com/com/parse/bolts/bolts-tasks/1.4.0/bolts-tasks-1.4.0.pom
Download https://jcenter.bintray.com/com/facebook/fresco/imagepipeline-base/0.11.0/imagepipeline-base-0.11.0.pom
Download https://jcenter.bintray.com/com/google/code/findbugs/jsr305/3.0.0/jsr305-3.0.0.jar
Download https://jcenter.bintray.com/org/webkit/android-jsc/r174650/android-jsc-r174650.aar
Download https://jcenter.bintray.com/com/squareup/okio/okio/1.9.0/okio-1.9.0.jar
Download https://jcenter.bintray.com/com/squareup/okhttp3/okhttp/3.4.1/okhttp-3.4.1.jar
Download https://jcenter.bintray.com/com/squareup/okhttp3/okhttp-urlconnection/3.4.1/okhttp-urlconnection-3.4.1.jar
Download https://jcenter.bintray.com/com/facebook/fresco/fbcore/0.11.0/fbcore-0.11.0.aar
Download https://jcenter.bintray.com/com/parse/bolts/bolts-tasks/1.4.0/bolts-tasks-1.4.0.jar
Download https://jcenter.bintray.com/com/facebook/fresco/imagepipeline-base/0.11.0/imagepipeline-base-0.11.0.aar
Download https://jcenter.bintray.com/com/facebook/fresco/imagepipeline/0.11.0/imagepipeline-0.11.0.aar
Download https://jcenter.bintray.com/com/facebook/fresco/imagepipeline-okhttp3/0.11.0/imagepipeline-okhttp3-0.11.0.aar
Download https://jcenter.bintray.com/com/fasterxml/jackson/core/jackson-core/2.2.3/jackson-core-2.2.3.jar
Download https://jcenter.bintray.com/com/squareup/okhttp3/okhttp-ws/3.4.1/okhttp-ws-3.4.1.jar
Download https://jcenter.bintray.com/com/facebook/fresco/drawee/0.11.0/drawee-0.11.0.aar
Download https://jcenter.bintray.com/com/facebook/fresco/fresco/0.11.0/fresco-0.11.0.aar
Download https://jcenter.bintray.com/com/facebook/soloader/soloader/0.1.0/soloader-0.1.0.aar
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library
:app:prepareComAndroidSupportRecyclerviewV72301Library
:app:prepareComAndroidSupportSupportV42321Library
:app:prepareComFacebookFrescoDrawee0110Library
:app:prepareComFacebookFrescoFbcore0110Library
:app:prepareComFacebookFrescoFresco0110Library
:app:prepareComFacebookFrescoImagepipeline0110Library
:app:prepareComFacebookFrescoImagepipelineBase0110Library
:app:prepareComFacebookFrescoImagepipelineOkhttp30110Library
:app:prepareComFacebookReactReactNative0310Library
:app:prepareComFacebookSoloaderSoloader010Library
:app:prepareOrgWebkitAndroidJscR174650Library
:app:prepareDebugDependencies
:app:compileDebugAidl
:app:compileDebugRenderscript
:app:generateDebugBuildConfig
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets
:app:generateDebugResValues
:app:generateDebugResources
:app:mergeDebugResources
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest
:app:processDebugResources
:app:generateDebugSources
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources
:app:preDexDebug
:app:dexDebug
:app:validateDebugSigning
:app:packageDebug
:app:zipalignDebug
:app:assembleDebug
:app:installDebug
Installing APK 'app-debug.apk' on 'Mi-4c - 5.1.1'
Unable to install C:\Users\Administrator\Desktop\HelloWorld\android\app\build\outputs\apk\app-debug.apk
相關推薦
【React Native】React Native 的開發路(Windows 開發環境配置)
開發平臺環境（Windows） 1 必備的軟體 包括 vscode jdk python nodejs andriodstudio五個軟體 ，下載找度娘 安裝C++環境 編譯node.js的C++模組需要用到Windows SDK、mingw cygwin
【備忘】react native 開發跨平臺github
百度網盤 第1章 專案需求分析、效果演示、功能分解，技術分解、開發計劃制定，首頁導航架構設計 第2章 專案基礎功能開發（ListView、下拉重新整理、上拉載入更多、APP啟動引導流程） 第3章 Popular(最熱）模組開發（AsyncStorage資料庫技術、離線快取）
【0.42】React Native 中文更新日誌
本文為 Marno 原創，轉載必須保留出處！ 公眾號【 aMarno 】，關注後回覆 RN 加入交流群 一、前言 想必也沒什麼人愛看更新日誌這種東西，所以我直接總結
【React Native】React Native的bind方法
這個問題其實是一個 JavaScript 中的問題。JavaScript中jQury的bind方法為選定元素新增事件處理程式，規定事件發生時執行的函式。 語法為： $(selector).bind(event,data,function) 也就是
【React Native】React Native中DrawerLayoutAndroid通過點選實現展開和關閉
React Native中，DrawerLayoutAndroid元件與Android原生開發中的DrawerLayout一樣實現側滑選單的效果。通過手勢左右滑動實現拉出與退出的操作，但是需要通過點選圖示或者文字就能彈出側滑選單該怎麼做呢？ 這時就需要
【React Native】React Native之Could not get BatchedBridge,make sure...的問題
下載了一個專案，npm install安裝之後，再次執行，卻出現Could not get BatchedBridge,make sure your bundle is packaged correctly的錯誤。 長這個樣： 先說解決方法： 1 .
react-native系列(2)入門篇：Windows系統下配置Android開發環境
本文主要內容是在Window系統下配置Android APP的開發環境，配置過程將會有點麻煩，請大家需要有點耐心。當然大家也可以參考RN官網的配置過程，但實際上很多開發者根據官網步驟並沒能配置出完整的RN開發環境。目前RN的最新版本是0.57，我們將以這個版本為例配置Android的開發環境。
【共享單車】—— React後臺管理系統開發手記：專案準備
前言：以下內容基於React全家桶+AntD實戰課程的學習實踐過程記錄。最終成果github地址：https://github.com/66Web/react-antd-manager，歡迎star。 一、專案概述 React全家桶 Reac
【共享單車】—— React後臺管理系統開發手記：UI選單各個元件使用（Andt UI元件）
前言：以下內容基於React全家桶+AntD實戰課程的學習實踐過程記錄。最終成果github地址：https://github.com/66Web/react-antd-manager，歡迎star。 一、按鈕Button pages->ui->button.js：對應路由/ad
【共享單車】—— React後臺管理系統開發手記：AntD Form基礎元件
前言：以下內容基於React全家桶+AntD實戰課程的學習實踐過程記錄。最終成果github地址：https://github.com/66Web/react-antd-manager，歡迎star。 一、使用Form元件開發登入頁面 pages->form-&
【共享單車】—— React後臺管理系統開發手記：主頁面架構設計
前言：以下內容基於React全家桶+AntD實戰課程的學習實踐過程記錄。最終成果github地址：https://github.com/66Web/react-antd-manager，歡迎star。 一、頁面結構定義 左側導航欄，右側頁面結構 右側顯示內容分別分為上Header
【共享單車】—— React後臺管理系統開發手記：Router 4.0路由實戰演練
前言：以下內容基於React全家桶+AntD實戰課程的學習實踐過程記錄。最終成果github地址：https://github.com/66Web/react-antd-manager，歡迎star。 一、React Router 4.0核心概念 4
【共享單車】—— React後臺管理系統開發手記：UI菜單各個組件使用（Andt UI組件）
type屬性 xxx 激活 自然數 col true nts ref dea 前言：以下內容基於React全家桶+AntD實戰課程的學習實踐過程記錄。最終成果github地址：https://github.com/66Web/react-antd-manager，歡迎sta
【共享單車】—— React後臺管理系統開發手記：城市管理和訂單管理
前言：以下內容基於React全家桶+AntD實戰課程的學習實踐過程記錄。最終成果github地址：https://github.com/66Web/react-antd-manager，歡迎star。 一、城市管理 pages->city->index.js：對應路由/admin
【共享單車】—— React後臺管理系統開發手記：權限設置和菜單調整（未完）
pla columns sna ets turn .ajax 管理 eas mage 前言：以下內容基於React全家桶+AntD實戰課程的學習實踐過程記錄。最終成果github地址：https://github.com/66Web/react-antd-manager，歡
React Native入門篇—第一步軟體安裝和環境配置
本人學習React Native沒有看過任何教學視訊，都是按照官網一步步學習的。只研究了Android開發，所以下面的教程都是Android開發教程。 注意：未經允許不可私自轉載，違者必究 React Native官方文件：https://reactnative.cn/docs
【網絡】 數據鏈路層筆記
出現 雙絞線 穩定性 同時 節點 計算 只需要 blog less 數據鏈路層 簡稱鏈路層，功能在於將數據包封裝成幀，控制幀對介質的訪問。鏈路層連接了物理介質和其之上抽象層，可以使上層不用關心用什麽方法在什麽介質中傳輸信息。 在幀被傳輸時經過的每一跳，每個中間設
技術福利【幹貨】音視頻 iOS CallKit 開發指南
音視頻 voip calllib開發指南 sdk iOS CallKit 開發指南簡介CallKit 是融雲音視頻通話功能的 UI 界面 SDK。包含了單人、多人音視頻通話的界面的各種場景和功能。您可以快速的集成 CallKit 來實現豐富的音視頻通話界面，並進行自己的 UI 定制開發。同時我
【技術案例】Firefly-RK3399多路視頻編解碼
code 準備 能夠 攝像頭 target 視頻 處理 wid 1-1 Firefly-RK3399開源板擁有強大的視像處理器（VPU），能夠流暢的實現H.264編解碼功能，可以同時進行兩路視頻編碼和五路視頻解碼。在應用方面，多路編解碼功能可以更優秀地應用於同時錄像和播放多
【原創遊戲】迷蹤失路——恐怖風格的第一人稱迷宮遊戲
clas 最快 mil 練手 https iyu share ood app ——第一人稱迷宮遊戲，一個探險者落入迷宮隧道，他能否靠著僅有的提示走出迷宮？繼合金彈頭S之後的練手小遊戲。 雖然是恐怖風格但是沒加入什麽嚇人的東西。下載地址：https://share.weiy