Windows下的React-Native開發調試環境安裝

Windows下的React-Native開發調試環境安裝

初學React-Native,需要搭建一套開發環境。
教程視頻中老師用的是Mac,我用的Window,在說環境配置的時候基本是一臉懵逼
本以爲React是開發一套,IOS和Android都能跑。看了視頻後,我突然感覺React還是傾向於IOS一些



環境搭建

Windows 不像 Mac 上那麼簡單,也只能面向 Android 去做選擇。
既然是面向 Andorid,那麼 Java 環境是必不可少的。

Java

Java下載

JAVA_HOME C:\Program Files\Java\jdk1.8.0_151
CLASSPATH .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
PATH %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin


Android SDK

推薦通過 Android Studio 一併進行安裝下載

配置 Android SDK 的環境變量,在系統的環境變量中添加

ANDROID_HOME D:\android-sdk-windows
PATH %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)


注意項
關於 Android SDK 裏,這些是必裝選項
Android SDK



Node.js

必裝選項下載地址。推薦msi版本

安裝成功後,通過 命令提示符 (Ctrl+R,”cmd”),安裝 react-native-cli

在安裝 react-native-cli 之前,推薦先進行如下操作

使用國內鏡像源加速

npm config set registry=https://registry.npm.taobao.org

安裝 yarn

npm install -g yarn

yarn 配置國內鏡像源加速

yarn config set registry https://registry.npm.taobao.org

安裝 react-native-cli

npm install -g react-native-cli



Genymotion

安卓的模擬器,很多都推薦用這個模擬器,Android Studio有模擬器,所以這個 非必須
好不好用不敢說,只能說比較卡

需要安裝 VirtualBox (推薦最新版),Genymotion需要註冊賬號。



創建項目

還是使用 命令提示符 ,切換到保存項目的目錄,輸入:

React-native init [項目名稱]



開始項目

通過 命令提示符 啓動項目,啓動後是作爲服務存在,不要隨意關閉

react-native start

這裏寫圖片描述

開啓服務後,可以通過 http://localhost:8081/index.android.bundle?platform=android 查看情況,會顯示大篇幅的JS



Android 調試

項目所在目錄,開啓 命令提示符 啓動Android調試

react-native run-android

第一次運行時會安裝較多的包,會安裝在 我的文檔 的 .gradle文件夾中。


我已經將視頻刪除,多看文檔吧。

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