1. 程式人生 > >React Native在window下的環境搭建(二):建立新專案

React Native在window下的環境搭建(二):建立新專案

React Native建立一個新專案:

react-native init TestAndroidApp

提示:你可以使用--version引數(注意是個槓)建立指定版本的專案。例如react-native init TestAndroidApp --version 0.44.3。注意版本號必須精確到兩個小數點。

會在相應目錄下建立一個TestAndroidApp的專案

 

這時使用編輯器開啟新建專案,我使用的webstrom開啟

 

這時會想,環境搭建好了,專案也建立完了,如何執行起來呢

 

第一:開啟Android Studio,選擇Open an existing Android Studio project開啟已建立的專案

開啟專案後選中Android目錄,使用的Android環境,只需載入Android目錄就好

 

Android Studio的工具欄中,會看到編輯按鈕灰色,應該是SDK沒有安裝好,要重新安裝SDK,安裝好後,會預設右邊app的顯示

 

然後可以使用Android模擬器,AVD (Android Virtual Device) Manager。首次開啟應該沒有模擬器配置,要先配置一個模擬器。點選Create Virtual Device按鈕。

選擇好對應的裝置後,點選下一步

 

安裝好後,就不會提示A system image must be selected to continue.

在SDK中對應的版本中選中

 

一切安裝好後,再點選AVD Manager會看到模擬裝置的選擇,然後點選執行就可以看到一個手機模擬器顯示

 

 

當看到一個手機模擬器是,就需要編譯android程式,來安裝到模擬器中。

   

 

點選新建的APP,如果看到的時一片紅色如下圖,要Hot loading isn't working because it cannot connect to the developemnt server. 也就是說沒有啟動服務程式。

這是要啟動webstrom中的專案,埠預設是8081,留意埠被佔用的情況。

 

啟動成功後,在模擬器中,使用Ctrl+M,彈窗操作選單類似真機上搖一搖彈出的選單,選擇reload重新載入,如果還是異常,檢視是否連線到指定ip和埠