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就可以看到修改後的效果瞭。