React Native在Windows下的安裝及環境配置(Android)

React Native在Windows下的安裝及環境配置(Android)。

接下來給大傢講一下在Windows環境下安裝React Native的環境,React Native是Facebook推出的開源項目框架,類似原生的APP的運行和響應速度,JS和HTML的混合,性能還算不錯。詳細的大傢就百度或谷歌查一下吧。很像JAVA和HTML的混合語法。本文主要針對Android。網上很多教程是舊的,本教程應該算是最新的瞭。

官方地址:https://facebook.github.io/react-native/

官方Github地址:https://github.com/facebook/react-native/

1、首先你電腦已經安裝瞭Android Studio,JDK。這就不用說瞭,會Android的電腦都會有這些。

2、下載安裝Nodejs。去官網下載:https://nodejs.org/en/ ,推薦最好下LTS版本,12M左右。

正常安裝即可。

3、安裝完Nodejs後,運行cmd打開命令窗口,輸入:node -v,如果正確獲取到Nodejs版本號,那就說明安裝正確。也可以輸入npm,看輸出有無錯誤。

4、安裝React Native命令行工具react-native-cli

輸入命令:

npm install -g react-native-cli

5、創建一個新項目,名字可以按照你的需要命名。

react-native init AwesomeProject

這裡按照官方寫的,叫:AwesomeProject。

如果你電腦沒安裝yarn,會自動先安裝yarn。

Yarn是什麼?百度或谷歌下。當然,yarn不翻墻的話下載很慢,所以推薦大傢去官網下載直接安裝即可。https://yarnpkg.com/zh-Hans/

下圖是命令安裝成功後的界面:

6、目錄結構看下:

7、運行我們的React Native服務器端:輸入命令行前,當前所在路徑要是項目的根目錄。

react-native start

8、瀏覽器就可以運行訪問編譯瞭。

用瀏覽器訪問https://localhost:8081/index.android.bundle?platform=android,如果可以訪問表示服務器端已經可以瞭。

9、運行編譯項目:

剛才運行服務器的命令窗口不要關閉,另外打開一個命令窗口,輸入:

react-native run-android

IOS的話,輸入:

react-native run-ios

前提是 已經運行啟動瞭模擬器,或者連接瞭真機才可以這樣輸入命令。

第一次運行,如果你沒有安裝gradle-2.14-all的話,會進行下載。

還有一種方式編譯運行,就是用Android Studio直接打開android工程文件,運行編譯到手機或者模擬器即可,支持Genymotion。如果想手機的React-Native APP可以訪問我們的剛才電腦上運行的服務器,那麼一定要在同一個wifi下。

運行正常的話,會出現下圖界面。

如果出現紅色的錯誤,可以點擊菜單鍵或者長按菜單鍵,重載或者設置服務器IP地址和端口號。

現在就可以編輯項目根目錄的index.android.js文件瞭。然後重新啟動APP就可以看到修改後的效果瞭。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *