Windows搭建react-native開發環境

標籤：code   x64   details   配置   pack   home   gradle   window   情況   

　一、目標平台 windows+android

　　　　1. 必須軟體

　　　　　　python2+

　　　　　　nodejs

　　　　　　npm

　　　　2. 安裝react-native命令列

　　　　　　$ npm install -g react-native-cli

　　　　3. 搭建安卓環境

　　　　　　(1)React Native目前需要Android Studio2.0或更高版本， Android Studio需要Java Development Kit [JDK] 8（注意暫不支援更高版本）

　　　　　　(2)官網上下載Android Studio即可, JDK選擇jdk-8u161-windows-x64.exe，目前jdk已經升級到10，切記不能選擇高於8版本

　　　　　　(3)運行項目需要安卓手機或者模擬器(自行百度，安裝需要空間較大)

　　　　　　(4)初始化安裝後可以選擇"custom"自訂路徑和組件(建議所有組件勾選，安裝到D盤目錄)

　　　　　　　　

　　　　　　(5)安裝完成開啟AS歡迎介面右下角選擇 Configure | SDK Manager

　　　　　　　　

　　　　　　在SDK Platforms視窗中，選擇Show Package Details，然後在Android 6.0 (Marshmallow)中勾選Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。(不同裝置可能需要SDK Platfrom版本不一樣，等到最後運行報錯提示時再回來安裝即可)

　　　　　　　　

　　　　　　在SDK Tools視窗中，選擇Show Package Details，然後在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1（必須包含有這個版本。當然如果其他外掛程式需要其他版本，你可以同時安裝其他多個版本）。然後還要勾選最底部的Android Support Repository.

　　　　　　　　

　　　　　　(6)配置環境變數分兩步(不能少)

　　　　　　　　一、將SDK的路徑添加

　　　　　　　　　　進階系統設定 > 進階 > 環境變數(系統變數S) > 建立 > 

　　　　　　　　　　　　　　變數名 : ANDROID_HOME

　　　　　　　　　　　　　　變數值 : D:\Users\Administrator\AppData\Local\Android\Sdk(實際的SDK下載位置)

　　　　　　　　二、將jdk8，platform-tools，tools添加環境變數PATH ,（此處是都安裝到D盤下，實際情況根據安裝目錄而定）

　　　　　　　　　　　　D:\Program Files\Java\jdk1.8.0_161\bin

　　　　　　　　　　　　D:\Users\Administrator\AppData\Local\Android\Sdk\tools

　　　　　　　　　　　　D:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools

　　　　　　　　三 、檢查jdk安裝是否成功 ： $ javac -version

　　　　　　　(7)串連手機

　　　　　　　　　　開啟手機開發人員選項： 設定 》 更多設定》 關於手機 》軟體版本號碼上連續點擊7次以上即可開啟 "開發人員選擇"

　　　　　　　　　　開啟手機USB調試 ： 設定 》更多設定 》開發人員選項(一般在最下邊) 》開發人員選項開啟，USB調試開啟

　　　　　　　　　　手機串連電腦 : 自動安裝驅動，如失敗，建議下載手機小幫手或者豌豆莢串連手機時會安裝驅動，此處使用電腦管家工具安裝串連

　　　　　　　　　　注意 : 手機第一次串連電腦時，手機首頁上會彈出調試對話方塊，需確定方可串連電腦，如錯過提示，可反覆多次串連手機

　　　　　　　　

　　　　　　　　　　

 

　　　　　　　　　最後 : 開啟命令列工具檢測手機是否串連成功 $ adb devices， 顯示devices序號即為串連成功

　　　　　　　　　　

　　　　　　　(8)構建項目

　　　　　　　　　　1. 初始化並安裝依賴， 如依賴安裝不完全，先刪除node_modules後在根目錄下重新 $ cnpm install 

　　　　　　　　　　

　　　　　　　　　　2. 啟動項目

　　　　　　　　　　$ react-native run android (首次運行需下載gradle依賴， 小數點表示下載進度， 由網路品質決定速度)

　　　　　　　　　　

　　　　　　　　　　

　　　　　　　　　　

 

　　　　　　　　　　下載到最後會新彈出nodejs伺服器視窗 (此視窗為項目開啟一個伺服器環境，可以在localhost:8081上運行), 此時手機上會自動開啟App

　　　　　　　　　　

 　　　　　　　　　　

　　　　　　　　　　手機上的APP

　　　　　　　　　　

　　4. 最後, 使用開發工具 (AS 或者 Webstorm), 在APP.js上修改代碼，在手機上觸摸左下角的菜單鍵快顯視窗點擊Reload即可更新修改

　　　　

 

　　　　　　

　　　　

 

 

 　　　　　　

 

 

　　　　　　　　　　　　

 

　　　　　　　　　　

　　　　　　

Windows搭建react-native開發環境