React-Native學習環境搭建

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 SDKAndroid Device Emulator

  • 在初步安裝完成後,選擇Custom安裝項:

custom installation

  • 檢查已安裝的組件,尤其是模擬器和HAXM加速驅動。

verify installs

 

  • 安裝完成後,在Android Studio的歡迎界面中選擇Configure | SDK Manager

 

configure sdk

 

  • SDK Platforms窗口中,選擇Show Package Details,然後在Android 6.0 (Marshmallow)中勾選Google APIsAndroid SDK Platform 23Intel x86 Atom System ImageIntel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image

 

platforms

 

  • SDK Tools窗口中,選擇Show Package Details,然後在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1(必須包含有這個版本。當然如果其他插件需要其他版本,你可以同時安裝其他多個版本)。然後還要勾選最底部的Android Support Repository.

 

build tools

 

  • 你可以把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以上版本

下載地址:https://nodejs.org/en/

下載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

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章