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
1、安裝Java JD
首先從Java官網下載JDK並且安裝,接下來要配置JAVA_HOME
環境變量。可以根據java -version來檢測一下,jdk最好是1.8以上。
2、安裝Android Studio
React Native目前需要Android Studio2.0或更高版本。
Android Studio需要Java Development Kit [JDK] 1.8(暫不支持更高版本)。你可以在命令行中輸入
javac -version
來查看你當前安裝的JDK版本。如果版本不合要求,則可以到 官網上下載。 或是使用包管理器來安裝(比如choco install jdk8
或是apt-get install default-jdk
)
Android Studio包含了運行和測試React Native應用所需的Android SDK和模擬器。
除非特別註明,請不要改動安裝過程中的選項。比如Android Studio默認安裝了
Android Support Repository
,而這也是React Native必須的(否則在react-native run-android時會報appcompat-v7包找不到的錯誤)。
-
確定所有安裝都勾選了,尤其是
Android SDK
和Android Device Emulator
。 -
在初步安裝完成後,選擇
Custom
安裝項:
- 檢查已安裝的組件,尤其是模擬器和HAXM加速驅動。
- 安裝完成後,在Android Studio的歡迎界面中選擇
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 Tools
窗口中,選擇Show Package Details
,然後在Android SDK Build Tools
中勾選Android SDK Build-Tools 23.0.1
(必須包含有這個版本。當然如果其他插件需要其他版本,你可以同時安裝其他多個版本)。然後還要勾選最底部的Android Support Repository
.
- 你可以把Android SDK的tools和platform-tools目錄添加到
PATH
變量中,以便在終端中運行一些Android工具,例如android avd
或是adb logcat
等。
3、安裝node.js
這貨是基於js的,node.js輕量級的Web服務器,想要是React Native跑起來需要安裝node, 如果沒有安裝node.js,先去官網安裝node.js,最好是4.1以上版本
下載node.js,找好對應的版本,然後去安裝就可以了。我安裝的是4.4.4版本,你們也可以安裝其他的
大家可以通過node -v的命令來測試NodeJS是否安裝成功
4、安裝git
安裝React-native需要用到git,如果沒有配置git,需要先下載對應的客戶端,然後將git加入path環境變量即可
下載地址:https://git-for-windows.github.io/
5、Python安裝 (注意目前不支持Python 3版本)
下載地址:https://www.python.org/downloads/release/python-2713/
下載完後,雙擊安裝 python-2.7.13.amd64.msi,安裝完後,配置環境變量,在path裏添加python的安裝路徑。
重打開cmd命令,輸入python -v 後出現如下圖則python 環境配置成功:
6、react-native-cli安裝
React Native的命令行工具用於執行創建、初始化、更新項目、運行打包服務(packager)等任務。
cmd命令,輸入 npm install -g yarn react-native-cli
如果成功的話,如下圖所示:
7、測試React-Native是否搭建好
主要下面三個命令初始化react-native項目並運行到android手機上。
1、react-native init HelloReact
2、cd HelloReact
3、react-native run-android
步驟1 在你的磁盤創建一個名爲RN的文件夾用於包含react-native項目,進入目錄,按住Shift+鼠標右鍵,選擇在“在此處打開命令窗口(W)”; 接着輸入react-native init HelloReact,初始化react-native項目,運行完後,如果成功會在你的磁盤的RN文件夾生成一個HelloReact項目
步驟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