react-native windows搭建運行環境

react-native的android環境搭建
以下react-native 全部簡稱rn
1、安裝java8以上的jdk
2、安裝android studio 並且配置和下載sdk
這裏需要注意設置環境變量ANDROID_HOME:Android SDK Manager的位置 例如:(ANDROID_HOME=> E:\Android\sdk)設置環境變量PATH:例如:(PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)
3、設置sdk


4、安裝nodejs,一路next,然後在終端輸入node -v
5、安裝git,一路next,然後在終端輸入 git 測試
6、安裝react-native命令行工具 rn-cli
npm install -g react-native-cli
7、創建rn項目
rn init demo
8、運行package
這個類似一個rn的服務器,先啓動
npm start 或者 rn start
然後在瀏覽器中打開
如果出現很多的js代碼, 就證明已經成功開啓
9、運行rn項目
重新打開一個終端,進入到demo目錄內,輸入
rn run-android 或者rn run-ios
如果使用模擬器,就在終端輸入adb devices檢測連接設備
沒有設備連接
進入到模擬器的bin目錄下
nox_adb connect 127.0.0.1:62001
然後在進入Android SDK下的platform-tools目錄
adb connect 127.0.0.1:62001
注意:如果真機和模擬器同時存在,rn會優先對真機執行測試,
10、進行配置
正在配置...



從react到react native
react native是基於react設計的,因此需要了解react有助於開發rn
R主要有三個特點
1、作爲ui
R可以只作爲師徒(view)在mvc中使用,並且在已有項目中 ,很容易使用R開發新功能
2、虛擬dom(virtual DOM)
可以很好的優化視圖的渲染和刷新,當然它也可以在node服務器端和RN中使用,虛擬dom是R最重要的一個環節。
以前我們在更新視圖時,需要先清空DOM容器裏的內容,然後將最新的DOM和數據追加到容器中,現在R將這一操作放進了內存,R認爲內存的操作遠比視圖全部更新來得高效。
3、數據流(data flow)
R實現了單向的數據流,並且相對於傳統的數據綁定而言,R更加靈活,便捷

學習R需要掌握以下知識點:
1、jsx語法掌握:jsx官方解釋就是其語法類似XML,這也是前端工程師更容易理解jsx的原因,因爲html是XML的子集,前端對html更爲熟悉
2、es6相關知識:因爲es6增加了很多語法特性和新功能,可以使用es6更加快速的進行功能開發
3、前端基礎知識:css和JavaScript

瞭解基本操作

爲什麼要使用react-native
因爲移動設備開發環境比web設備開發環境成本、難度要高的多,隨着現在前端的人員越來越多,而原生開發人員相對較少。一些公司追求app開發效率、成本、體驗之間的平衡,從而選擇了Hybird(混合) 開發app,這樣做的好處就是既能擁有高效的開發效率和較多的開發人員,又能快速更新APP。但是這樣做。會存在一些html性能也體驗上的弱勢。
而RN的跨平臺解決特性和使用JavaScript作爲開發語言而贏得了衆多開發者的關注,實際上html5應用在用戶體驗和性能上比原生應用弱一些。
RN不僅可以使用前端開發的模式來開發應用,還能調用原生應用的ui和API。
發佈了1 篇原創文章 · 獲贊 1 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章