windows 64位下,React-Native環境搭建詳解 (Android)


React-Native環境搭建需要: 
1、安裝Java JDK 
2、安裝Android Studio 
3、安裝node.js 
4、安裝git 
5、安裝Python 2.x (注意目前不支持Python 3版本) 
6、安裝react-native-cli 
7、測試環境是否搭建好

附:React-Native中文網環境搭建鏈接 https://reactnative.cn/docs/0.46/getting-started.html#content

一、java Jdk安裝,下載地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html。由於我的系統是64位的,這里選擇:jdk-8u131-windows-x64.exe。下載完后,雙擊jdk-8u131-windows-x64.exe 進行安裝。 
接着配置系統環境,右擊“計算機”–>”屬性”–>”更改設置”–>”高級”–>”環境變量”,如圖: 
這里寫圖片描述 
點擊系統變量的“ 新建”–>輸入 JAVA_HOME以及jdk安裝路徑,如圖: 
這里寫圖片描述

在系統變量里找到Path,雙擊在變量值的最前面加上 %JAVA_HOME%\bin;后,點擊確定。如圖: 
這里寫圖片描述

重打開cmd命令,輸入 
java -version 后出現如下圖則java環境配置成功: 
這里寫圖片描述

二、由於Android Studio包含了運行和測試React Native應用所需的Android SDK和模擬器。所以android studio安裝,下載地址:https://developer.android.com/studio/index.html

附android studio安裝教程鏈接:http://www.runoob.com/android/android-studio-install.html

Android studio安裝時,記得要勾選上android sdk,如下圖: 
這里寫圖片描述

設置環境變量ANDROID_HOME 與JAVA_HOME配置類似,右擊“計算機”–>”屬性”–>”更改設置”–>”高級”–>”環境變量”,點擊系統變量的“ 新建”–>輸入 ANDROID_HOME以及sdk路徑,例如:(ANDROID_HOME=> E:\Android\sdk)設置環境變量Path:%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools; 
重打開cmd命令,輸入adb 后出現如下圖則android 環境配置成功: 
這里寫圖片描述

三、node.js安裝,下載地址:https://github.com/coreybutler/nvm-windows/releases 下載 nvm-setup.zip 安裝文件。 
雙擊這里寫圖片描述運行安裝,安裝完后,打開cmd命令窗口,輸入nvm -version,出現以下界面,證明nvm安裝成功!這里寫圖片描述

為了安裝node.js安裝更快,nvm配置淘寶鏡像 
找到剛才nvm的安裝目錄下的settings.txt文件,打開在末尾增加 node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

這里寫圖片描述

然后通過nvm安裝對應版本的nodejs,打開cmd命令窗口,運行 
nvm install latest(安裝最新版本) 
也可以指定版本 nvm install 6.10.0 
安裝完成后會以下界面: 
這里寫圖片描述

四、git安裝,如果沒有配置git,需要先下載對應的客戶端,然后將git加入path環境變量即可. 
下載地址:https://git-for-windows.github.io/

五、Python安裝 (注意目前不支持Python 3版本) 
下載地址:https://www.python.org/downloads/release/python-2713/

下載完后,雙擊安裝 python-2.7.13.amd64.msi,安裝完后,配置環境變量,在path的最前面添加python的安裝路徑,如圖: 
這里寫圖片描述

重打開cmd命令,輸入python -v 后出現如下圖則python 環境配置成功: 
這里寫圖片描述

六、react-native-cli安裝(React Native的命令行工具用於執行創建、初始化、更新項目、運行打包服務(packager)等任務。) 
cmd命令,輸入 npm install -g yarn react-native-cli 
如果成功的話,如下圖所示: 
這里寫圖片描述

七、測試React-Native是否搭建好 
主要下面三個命令初始化react-native項目並運行到android手機上。 
1、react-native init HelloProject 
2、cd HelloProject 
3、react-native run-android

步驟1 在F盤創建一個名為RN的文件夾用於包含react-native項目,進入目錄,按住Shift+鼠標右鍵,選擇在“在此處打開命令窗口(W)”如圖: 
這里寫圖片描述

接着輸入react-native init HelloProject,初始化react-native項目,運行完后,如果成功會在F盤的RN文件夾生成一個HelloProject項目,如圖:

這里寫圖片描述

步驟2 cd HelloProject 進入項目

步驟3 電腦通過USB連接手機,手機要在設置打開“開發者選項”(不同的手機,打開的方式不同)。然后輸入react-native run-android命令,成功的話會出現下圖: 
這里寫圖片描述 
這里寫圖片描述

同時,手機上會出現,以下界面 
這里寫圖片描述

注意事項: 
如果運行不能成功,有以下可能: 
1、要確保以上工具都安裝了,並且到加入系統環境變量的Path路徑上

2、存放react-native項目的文件夾名,最好是由字母和下划線組成

3、查看手機是否連接上電腦,可以用adb devices命令查看是否連接上,如下圖: 
這里寫圖片描述

4、項目中的目錄下的 android–>build.gradle中 
compileSdkVersion 23 
buildToolsVersion “23.0.1” 
中的版本,android sdk要包含有。 
查看android sdk build版本,打開android studio,菜單File–>選項 Settings –> Appearance&Behavior –> System Settings –>Android SDK–>SDK Platforms和 SDK Tools,如下圖:

這里寫圖片描述

這里寫圖片描述

這里寫圖片描述

這里寫圖片描述

5、檢查android 環境變量是否配置好

6、如果允許出現白屏或者報錯,可以通過搖一搖手機或者電腦cmd運行adb shell input keyevent 82命令,調查調試框,如圖: 
這里寫圖片描述

接着,點擊Dev Settings,如圖: 
這里寫圖片描述

然后點擊Debug server host & port for device,輸入ip和端口,如圖: 
這里寫圖片描述

最后,重新運行 react-native run-android 即可。

附: 
React-native調試: 
1、如果android模擬器的話,可以在電腦鍵盤上的按兩下R (reload項目) 
2、真機調出調試窗口: 
(1)手機搖一搖 
(2)手機菜單鍵(某些手機不行) 
(3)電腦打開cmd運行 adb shell input keyevent 82 
3、連接模擬器方式 
夜神模擬器 adb connect 127.0.0.1:62001 
逍遙模擬器 adb connect 127.0.0.1:21503


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM