React Native跨平臺移動應用開發框架介紹

好久沒有來更新博客了,給大家說聲抱歉,人一旦懶惰起來連自己都害怕??赡苁且驗橐粋€人生活,少了很多動力吧。這都是在給自己找理由。我在不偷懶了。
最近我要入坑了,公司安排我要開始搞React Native了,之前也給大家分享過一篇RN的搭建框架,那時候只是對RN感興趣想有時間學學,但是現在要投入更多的時間。

這周領導讓我給搭建分享下RN跨平臺開發技術,簡單的介紹一下,可是網上關于RN的技術博客很多,語言描述性的缺很少,讓初學者沒有一個很好的概念去全面的了解RN,所以呢我就大概總結了一下RN跨平臺移動應用開發框架的介紹。

前言

隨著科技的發展,Android與iOS量大操作系統已經稱霸江湖(這種穩定對開發者是一件好事,相互競爭也讓兩大操作系統都在不斷的提升完善)。手機硬件配置越來越強大,能力越來越強大,價格越來越平易近人。手機現在已經成為了普通老百姓無時無刻不隨身攜帶的電腦。伴隨著這種趨勢,市場對移動應用的需求也越來越多,而且要求越來越高。。

這么多年來,移動開發應用開發者做夢都希望有一個能跨平臺的開發工具,讓他們不要把同一個移動應用使用不同的開發語言寫兩遍。但是跨平臺開發工具的實現很難,很多先驅者倒在了這條路上。直到Facebook給大家帶來了React Native。

簡介

2015年3月26日,Facebook公司對外正式發布了React Native -- 使用React框架跨平臺開發原生移動應用的開源技術框架。開發者可以使用React Native 高效開發Android和iOS操作系統的應用程序。
它的設計理念是:使用React Native開發,即擁有Native的良好人機交互體驗,又保留了React框架的開發效率。
(Native是指使用原生開發環境開發的應用程序。Native的良好人機交互體驗是指當用戶手指在屏幕上操作時,被觸摸的UI組件會發生視覺上的變化)
(而React是Facebook從2012年以來慢慢發展起來的一套開發框架,在這套框架上誕生了React.js用來進行網頁開發,以及React Native用來進行APP開發?!禦eact、React.js、React native三者的關系后面具體來看》)

特點

  1. 一次學習,隨處編寫

    React Native提出“Learn once, write anywhere”。使用React Native可為Android和iOS兩個操作系統開發應用程序,但不同平臺上的代碼根據平臺會有細小區別,但開發思路是相同的。

  2. 混合開發

    React Native允許開發者在React Native擅長的領域使用React Native開發,而在React Native不能實現的領域或者已經有原生代碼實現好的領域直接使用原生代碼。React Native 代碼開發模塊與原生代碼開發的模塊可以雙向通信、無縫銜接。

    • 混合開發情況3種:
      • UI界面由React Native開發,但UI事件處理由原生代碼執行。
        • 比如登錄功能,React Native開發包含用戶名、密碼輸入以及登錄按鈕控件的界面,用戶輸入相關信息,點擊登錄按鈕后,React Native組件將用戶名和密碼傳給原生代碼編寫的登錄模塊(Android:java開發,iOS:Object-C或Swift開發),讓原生代碼執行登錄操作。原生代碼向服務器發送登錄請求,并等待回應。在服務器回應后,原生代碼將受到的回應中的登錄成功與否,以及其它的一些需要向UI展示的數據傳遞給React Native組件,React Native接收并解析這些數據,執行UI更新,向用戶展示。
      • 將原生使用原生代碼實現的UI小部件包裝成React Native的自定義組件
        • React Native支持將Widget(官方、第三方開源、開發者自行開發)包裝成React Native的自定義組件,然后在React Native代碼中方便的使用。
      • 應用界面在React Native開發的界面與原生代碼開發的界面間切換
        • 在已用原生代碼開發好的項目中加入一些用React Native 開發的新界面,混合開可以做到讓應用界面流暢自如地在這兩種界面間切換,用戶對此不會有任何的感知。
  3. 高效的UI開發

使用React Native開發移動應用的UI界面比使用原生語言快捷高效,再考慮到至少90%的移動界面都可以使用React Native開發,一分代碼適配android和iOS兩個平臺,這相當于減掉了一個開發平臺上至少50%的工作量。

React Native可以實現很多UI之外的功能,但開發UI部分絕對是React Native的強項,這體現在如下四個方面:
  • 獨特的UI實現框架

    • 復雜UI界面開發難點的本質問題就是:如何將來自網絡側與用戶側的動態數據高效、實時、正確地呈現在復雜的用戶界面上。 FaceBook的React框架是這個問題的一個優秀解決方案。React Native官網描述它的出發點為:用于開發數據不斷變化的大型應用程序。相比傳統的UI開發,React開辟了一個相當另類的途徑,實現了UI界面的高效率、高性能開發。使用React開發,開發者永遠只需要關心數據。當數據改變時,開發者只需要告訴React數據變了,有React來實現UI界面的改變。
  • 組件化開發

    • React 推薦已組件的方式去重新思考UI構成,將UI上每個功能相對獨立的模塊定義成組件,然后將小的組件通過組合或者嵌套的方式構成大的組件,最終完成整體的UI的構建。

    React強調將應用劃分成多個互不相關的組件,每個組件作為獨立的視圖。這使得開發者更容易進行軟件迭代升級,因為不用在改動某一小部分時把整個系統都梳理一遍。最重要的的是,React包裝了復雜而易變的數據到對象的實現,改為提供一個聲明式的結構,使得整個程序模型變得抽象而簡單。使用React來構建網頁或者手機UI時,代碼變的更容易預測。這種可預測性使得開發者在快速迭代產品時可以更多地信任已有的代碼,最終應用程序也變得更為可靠。更進一步的,React框架不僅僅使擴大應用規模變得容易,也使得團隊規模更容易進行調整。
    這樣開發出來的代碼結構清晰、公用性高、可移植性高。上一個項目的某些組件,可以很方便的拿來在下一個項目中使用;好的開源組件,可以下載后很方便地集成在我們的項目中使用。

  • 跨平臺移植代碼迅速

    • 使用React Native進行UI開發時,開發者通常在一個平臺上開發,然后用這一套代碼去另一個操作系統中進行修正。通常需要修正的代碼只有總代碼的5%甚至更低。

  • 自動匹配不同屏幕大小的手機

    • 使用React Native開發,開發者無須為不同屏幕分辨率準備不同的圖片資源或者布局文件,甚至可以不考慮屏幕大小的問題。通過靈活的布局方式,React Native可以做到在不同的手機屏幕上高效、清晰的UI呈現。
  1. 高效的UI調試

使用React Native開發,修改了代碼后立刻可以在手機上看到效果,沒有重新編譯啟動程序所需要的時間。并且可以打開一個Chrome窗口,所有的代碼都移植到Chrome里面運行,斷點調試、單步調試、調用棧追蹤這些常用的調試方法都可以進行操作。

  1. 學習門檻低、開發難度低
    • 開發語言簡單
      • React Native使用ECMAScript 2015語言(簡稱ES 6)以及自創的JSX(JavaScript中加入標簽化的XML)來進行開發。對于沒有JavaScript知識背景的移動開發人員,只需要花時間熟悉JavaScript的基本語法后就可以使用React Native進行開發。
    • 語法接近自然語言
      • React Native開發中的函數名、變量名都采用類似于自然語言的命名法,便于記憶。這種代碼語句的基本含義基本可以直接推斷和理解。
    • 積木式UI開發
      • 使用React Native開發時,是一種類似于搭積木的方式。不論是設計還是實現,通過React Native框架都能做到邏輯結構清晰、開發難度低、可讀性高、后期維護方便。
  2. 開發軟硬件要求低

使用ReactNative開發對軟硬件要求低,RN開發用的軟件都是可免費下載、安裝使用的正版軟件,部分是開源軟件。

  1. 使用React Native開發的代價
    • 內存消耗略大
      • 使用React Native 開發的程序運行所需內存比原生代碼開發的程序略多。
    • 運行速度
      • 使用React Native開發的代碼的運行速度比原生代碼略慢。
    • 安裝包比原生代碼安裝包大
      • 使用React Native開發的程序體積比原生代碼大。無論是安裝包的大小,還是安裝后需要的空間都比原生代碼編寫的程序大。

8.使用RN開發的優點

  • 1、組件化開發,復用率高,組件豐富以后,UI開發較快,前端式開發。
  • 2、同時支持Android和iOS的UI界面。
  • 3、可以方便的進行代碼熱更新。
  • 4、Learn once,write anywhere,未來js可能會有更大的通用性,比如現在微信小程序的開發技術和React Native十分相似?,F在還有用React Native開發mac桌面應用,開發web網頁。
  • 5、可以和原生頁面互相調用,作為一部分嵌入到一個已有的原生app中。它是一種介于在webview和原生開發之間的解決方案,它想要實現像web一樣靈活,像原生一樣的性能,雖然現在還都沒有達到,但是它是一種有可能接近這個目標的解決方案。

9.使用RN開發的缺點

  • 1、由于還不是穩定版本,版本更新太快,大概兩周會有一個新的版本。更新新 版可能會出現不兼容的問題,有時候需要手動解決。
  • 2、支持的組件不全面。大部分廠商并不支持react native。一些支持的現在一般也處在不穩定版本。比如截止到rn版本0.42,js版的本地數據庫組件只有realm支持,現在realm版本為3.1.0。相比較realm數據庫現在是越來越穩定了。
  • 3、程序的性能。現在普遍都說比原生的性能要差,但是差多少沒有一個具體的衡量。直觀的感覺是復雜的頁面在一些配置較低的手機上會有肉眼可見卡頓的感覺。
  • 4、雖然大多界面可以同時生成ios和android的,但一些涉及到底層的東西需要在ios和android單獨開發,然后在js層進行調用。
  • 5、關于react native的開發現在并沒有一些best practice,也沒有真正很有經驗的人,很多只能摸索。對于小團隊來說,試錯成本有點高,一旦卡在一些問題上,網上解決方案很少,容易耽誤了整體的進度。

關于RN的概念就說這么多了,我想你看完之后一定會對React Native有一個更好的認識了,接下來我會根據我自己學習RN之路的收獲和遇到的困難來寫更多的博客。
如果你想了解更多歡迎加入我們一起學React Native 群點擊鏈接加入群【我們一起學React Native】
來一起學習吧

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,546評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,570評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,505評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,017評論 1 313
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,786評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,219評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,287評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,438評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,971評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,796評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,995評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,540評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,230評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,918評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,697評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內容