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