移動端混合開發(fā)框架分析

1、移動端架構分析目錄 TOC o 1-5 h z 移動端架構撕1 HYPERLINK l bookmark58 o Current Document 1 移動端常見開發(fā)模式5 HYPERLINK l bookmark61 o Current Document 純 Native app 5 HYPERLINK l bookmark65 o Current Document 主流框架5 HYPERLINK l bookmark69 o Current Document 優(yōu)勢6 HYPERLINK l bookmark72 o Current Document 劣勢6 HYPERLINK l book

2、mark75 o Current Document 主流應用6 HYPERLINK l bookmark78 o Current Document L2Hybrid app 6 HYPERLINK l bookmark82 o Current Document 多View混合型7 HYPERLINK l bookmark85 o Current Document 主流框架7 HYPERLINK l bookmark89 o Current Document 優(yōu)勢7 HYPERLINK l bookmark93 o Current Document 劣勢7 HYPERLINK l bookmar

3、k97 o Current Document 主流應用7 HYPERLINK l bookmark100 o Current Document 發(fā)展趨勢7 HYPERLINK l bookmark103 o Current Document Web 主體型8 HYPERLINK l bookmark129 o Current Document 主流框架平臺8 HYPERLINK l bookmark133 o Current Document 優(yōu)勢9 HYPERLINK l bookmark137 o Current Document 劣勢9 HYPERLINK l bookmark120 o

4、 Current Document 主流應用10 HYPERLINK l bookmark123 o Current Document 發(fā)展趨勢10 HYPERLINK l bookmark126 o Current Document 1.2.3單View混合型 10 HYPERLINK l bookmark148 o Current Document 主流框架10 HYPERLINK l bookmark151 o Current Document 優(yōu)勢10 HYPERLINK l bookmark158 o Current Document 劣勢10 HYPERLINK l bookmar

5、k166 o Current Document 主流應用10 HYPERLINK l bookmark144 o Current Document Web App 10主流框架11 HYPERLINK l bookmark112 o Current Document 優(yōu)勢11 HYPERLINK l bookmark116 o Current Document 劣勢11 HYPERLINK l bookmark141 o Current Document 主流應用11四種主要開發(fā)模式對比112移動前端主流框架分析12 HYPERLINK l bookmark169 o Current Docu

6、ment Web 和 Native 混合 12 HYPERLINK l bookmark172 o Current Document WindVane+Hybrid + Native 12 HYPERLINK l bookmark181 o Current Document 簡介12 HYPERLINK l bookmark185 o Current Document 框架實現(xiàn)12 HYPERLINK l bookmark188 o Current Document 架構圖13AppCan 13簡介13 HYPERLINK l bookmark197 o Current Document 框架

7、實現(xiàn) 13 HYPERLINK l bookmark200 o Current Document 架構圖142.2 跨平臺原生應用15BeeFramework 15簡介15 HYPERLINK l bookmark209 o Current Document 框架實現(xiàn)15 HYPERLINK l bookmark212 o Current Document 架構圖16Native Script 17簡介17 HYPERLINK l bookmark221 o Current Document 框架實現(xiàn)17結構圖18React Native 18簡介18 HYPERLINK l bookmark

8、178 o Current Document 框架實現(xiàn)18架構圖203數(shù)夢移動端開發(fā)框架選擇 錯誤！未定義書簽。開發(fā)模式選擇20為什么不選擇Native 20 HYPERLINK l bookmark227 o Current Document 玩什么不選擇WebApp或Web主體型Hybird21 HYPERLINK l bookmark230 o Current Document 選擇多頁面混合型Hybird 21 HYPERLINK l bookmark233 o Current Document 選擇類WindVane框架21 HYPERLINK l bookmark236 o Cur

9、rent Document 玩什么不選擇 React Native 21 HYPERLINK l bookmark239 o Current Document 玩什么選擇類WindVane框架21Native HybridWebweb諾言：Htm!受限制 TUlweoview頁面放于服務器1移動端常見開發(fā)模式目前主流應用程序大體分為三類：Native App、Hybrid App、Web App。原生語言：Object C (IOJava( Android) 頁面存放于本地濕舍請言:ObiectCffOS)+ Htm 受限制于U Iwe bvi如純 Native AppNative APP指的

10、是使用原生程式編寫運行的第三方應用程序，一般依托于操作系統(tǒng)如 iOS、Android、WP，有很強的交互，是一個完整的App，可拓展性強。需要用戶下載安 裝使用。也叫本地app。Native App因為位于平臺層上方，向下訪問和兼容的能力會比較好一些，可以支持在 線或離線，消息推送或本地資源訪問，攝像撥號功能的調取。但是由于設備碎片化，App 的開發(fā)成本要高很多，維持多個版本的更新升級比較麻煩，用戶的安裝門檻也比較高。但是 比較樂觀的是，AppStore培養(yǎng)了一種比較好的用戶付費模式，所以在Apple的生態(tài)圈里， 開發(fā)者的盈利模式是一種明朗狀態(tài)，其他market也在往這條路上靠攏。主流框架iO

11、S：(11 Cocoa 環(huán)境+Foundation 和 UIKit 框架(2 使用Objective-C和Swift做為主要開發(fā)語言(兼容C/C+)Android：(1 Java虛擬機環(huán)境(2 使用Java作為主要開發(fā)語言(支持C/C+)WindowsPhone :(1 WindowsRunTime 框架(WP10)(2使用原生C+、C#和 Silverlight做為主要開發(fā)語言1.1.2優(yōu)勢(1 打造完美的用戶體驗(2 性能穩(wěn)定(3 操作速度快，上手流暢(4 訪問本地資源(通訊錄，相冊)(5 設計出色的動效，轉場(6 擁有系統(tǒng)級別的貼心通知或提醒(7用戶留存率高1.1.3劣勢(1 開發(fā)成本高

12、，可移植性差，需要維護iOS、Android、WP等多個平臺(不同平 臺有不同的開發(fā)語言和界面適配)(2 維護成本高(例如一款App已更新至V5版本，但仍有用戶在使用V2，V3， V4版本，需要更多的開發(fā)人員維護之前的版本)(3 更新緩慢，根據(jù)不同平臺，提交-審核-上線等等不同的流程，需要經過的流程 較復雜1.1.4主流應用夠快云庫、微信電話本、美圖秀秀等中量級應用。HybridAppHybrid APP指的是半原生半Web的混合類App。需要下載安裝，部分頁面看上去類 似Native App，但只有很少的UI Web View，訪問的內容是Web。Hybrid App主要以JS+Native

13、兩者相互調用為主，從開發(fā)層面實現(xiàn)一次開發(fā)，多 處運行”的機制，成為真正適合跨平臺的開發(fā)。Hybrid App同時使用網(wǎng)頁語言與程序語言開發(fā)，通過應用商店區(qū)分移動操作系統(tǒng)分發(fā)， 用戶需要安裝使用的移動應用。總體特性更接近Native App但是和Web App區(qū)別較大。 只是因為同時使用了網(wǎng)頁語言編碼，所以開發(fā)成本和難度比Native App要小很多。因此說， Hybrid App兼具了 Native App的所有優(yōu)勢，也兼具了 Web App使用HTML5跨平臺開 發(fā)低成本的優(yōu)勢。Hybrid App按網(wǎng)頁語言與程序語言的混合，通常分為三種類型：多View混合型，單View混合型，Web主體型

14、。1.2.1多View混合型即Native View和Web View獨立展示,Native View與WebView交替的場景出現(xiàn)。 這種應用混合邏輯相對簡單。即在需要的時候將WebView當成一個獨立的View(Activity) 運行起來，在WebView內完成相關的展示操作。這種移動應用主體通常是Native App， Web技術只是起到補充作用。開發(fā)難度和Native App基本相當。主流框架Native部分使用操作系統(tǒng)原生框架+JSBridge。Web融合部分國內阿里系使用最廣的框架WindVane+HybridAPI等(后續(xù)章節(jié)詳細 介紹優(yōu)勢(1 高效、擴展性強、支持多團隊并行開

15、發(fā)(2 銜接Android/iOS原生導航交互，完美的用戶體驗(3 業(yè)務實現(xiàn)更靈活，復雜業(yè)務可通過Native實現(xiàn)，頻繁變化或簡單業(yè)務通過Web 實現(xiàn)，更好的滿足移動端業(yè)務多樣性、快速迭代要求(4 輕量級的框架，框架侵入性弱，各個業(yè)務高度獨立，第三方業(yè)務快速接入(5 使用JS Bridge來實現(xiàn)HTML5頁面與原生框架的數(shù)據(jù)交互：JSNative，性 能和安全性更佳(6 擴展豐富，能實現(xiàn)超級App劣勢(1 技術要求高，需要開發(fā)人員同時懂Native和WebApp開發(fā)(2 重量級架構，架構搭建需要較長時間(3 開源社區(qū)相關框架少，成熟框架如WindVane等不開源主流應用目前使用最常用的開發(fā)模式

16、，市場上能見到的超級App基本都是用這種開發(fā)模式，如 微信、支付寶、淘寶等；其他如釘釘、新聞客戶端等移動端App發(fā)展趨勢2014-2015最新發(fā)展趨勢，同時在Web和Native融合的基礎上加入ReactNative或NativeScript等跨平臺構建原生應用框架(見后續(xù)介紹。Web主體型即移動應用的主體是Web View，主要以網(wǎng)頁語言編寫，穿插Native功能的Hybrid App開發(fā)類型。這種類型開發(fā)的移動應用體驗相對而言存在缺陷，但整體開發(fā)難度大幅降 低，并且基本可以實現(xiàn)跨平臺。Web主體型的移動應用用戶體驗的好壞，主要取決于底層 中間件的交互與跨平臺的能力。國外的appMobi、P

17、honeGap和國內的WeX5、AppCan 和Rexsee都屬于Web主體型移動應用中間件。其中Rexsee不支持跨平臺開發(fā)appMobi 和PhoneGap除基礎的底層能力更多是通過插件（Plugins）擴展的機制實現(xiàn)Hybrid。 AppCan除了插件機制，還提供了大量的單View混合型的接口來完善和彌補Web主體型 Hybrid App體驗差的問題，接近Native App的體驗。而WeX5則在揉合PhoneGap和 Bootstrap等主流技術的基礎上，對性能進一步做了深度優(yōu)化，不但完全具備Native App 對本地資源的調用能力，性能體驗也不輸原生；WeX5所開發(fā)出來的app具備

18、完全的跨端 運行能力，可以無需任何修改直接運行在各種前端環(huán)境上。主流框架平臺1、AppceleratorAppcelerator 的 Titanium 開發(fā)平臺使開發(fā)者可以通過 HTML、PHP、JavaScript、 Ruby、Python等Web編程語言開發(fā)手機、平板和桌面的原生App。其優(yōu)勢在于它可以讓 用戶輕松地訪問超過300個API以及定位信息。此外，Appcelerator提供針對特定行為或事件定制的統(tǒng)計。App的數(shù)據(jù)既可儲存在云 端，也可儲存在設備上。2、APICloudAPICloud是一款云端一體的移動開發(fā)平臺，信仰云端一體的理念，重新定義 了移動應用開發(fā)。APICloud為

19、開發(fā)者從云和端兩個方向提供API，簡化移動應用 開發(fā)技術，讓移動應用的開發(fā)周期從一個月縮短到7天。APICloud由云API和端 API兩部分組成，可以幫助開發(fā)者快速實現(xiàn)移動應用的開發(fā)、測試、發(fā)布、管理和運營的 全生命周期管理。3、PhoneGapPhoneGap是一個免費且開源的開發(fā)環(huán)境，使開發(fā)者可以開發(fā)出在Android、Palm、 黑莓、iPhone、iTouch及iPad等設備上運行的App。其使用的是HTML和JavaScript 等標準的Web開發(fā)語言。開發(fā)者使用PhoneGap進行開發(fā)，可調用加速計、GPS/定位、照相機、聲音等功能。PhoneGap還提供Adobe AIR Ap

20、p以及在線的培訓課程，幫助開發(fā)者了解原生API 并在他們自己的平臺上開發(fā)移動App。4、KinveyKinvey同樣是一個為移動應用開發(fā)者提供后臺創(chuàng)建服務的平臺。Kinvey強調加速移動 應用開發(fā)與銷售的即取即用理念。Kinvey的中間層與數(shù)據(jù)層均托管在多個云服務提供 商處，包括Rackspace、Amazon與Microsoft。所有通過Kinvey存儲的數(shù)據(jù)都會有四 種方式備份：Amazon EC2、Windows Azure、Rackspace 以及 Kinvey 自己的服務器， 假如其中一兩個出現(xiàn)了故障，用戶的數(shù)據(jù)依然安然無恙。5、ExMobiExMobi通過全面的數(shù)據(jù)集成技術和豐富的

21、跨平臺客戶端展現(xiàn)能力，將業(yè)務系統(tǒng)快速、 安全、高效的移植于移動終端。ExMobi從開發(fā)(IDE環(huán)境 集成(IT系統(tǒng)對接、云服務 打包(各個操作系統(tǒng)的應用打包、發(fā)布(應用的運行)管理(日志管理，更新管理)上提 供了一套完整的解決方案。并通過專業(yè)的培訓和支撐渠道為開發(fā)者提供可持續(xù)的學習和交流 空間，掃除開發(fā)障礙。優(yōu)勢(1可跨平臺，兼容iOS、Android、WP等多個平臺(2 易用性，會Web開發(fā)即可轉型App開發(fā)(3可利用成熟javascript框架(4 程序升級簡單(5 維護難度低劣勢(1 運行速度慢(2 不適合部分程序，如復雜的動畫、3D功能、音頻視頻以及復雜的界面邏輯等(3 調用平臺資源差

22、，功能受限平臺實現(xiàn)(4 資源占用大，如內存、CPU、網(wǎng)絡帶寬等(5 調試難度大(6 不利于多人協(xié)作開發(fā)主流應用12306客戶端、中國工商銀行客戶端等功能較單一的輕量級應用。發(fā)展趨勢雖然跨平臺復用代碼是一個火熱的話題，但是基于Html5的PhoneGap等Hybrid 框架沒有被大多數(shù)人接受(運行速度慢、交互差是主要原因)，目前更多的方案是Web和 Native多View混合或用各種辦法產生原生的UI界面(如BeeFramework、NativeScript、 ReactNative 等)。1.2.3單View混合型即在同一個View內，同時包括Native View和Web View?；ハ嘀g

23、是覆蓋(層疊)的 關系。這種Hybrid App的開發(fā)成本較高，開發(fā)難度較大，但是體驗較好。如百度搜索為代 表的單View混合型移動應用，既可以實現(xiàn)充分的靈活性，又能實現(xiàn)較好的用戶體驗。主流框架基本沒有特別成型的框架，主要為部分App做Web嵌套，完成廣告、宣傳等功能。Native 部分同 NativeApp。Web 部分同 WebApp。優(yōu)勢(1 能解決廣告、宣傳等模塊變化過快問題，滿足市場需求(2 有NativeApp的大部分優(yōu)點劣勢(1 開發(fā)難度大，Native和Web代碼混合，技術難度基本等同Native開發(fā)(2 維護難度大等Native常見的缺點主流應用目前純粹使用單View混合型的

24、App較少(部分App的部分頁面會用這種開發(fā)模式)， 主要應用場景如App中添加廣告、宣傳等。WebAppWeb App指采用Html5語言寫出的App，不需要下載安裝。類似于現(xiàn)在所說的輕應用。生存在瀏覽器中的應用，基本上可以說是觸屏版的網(wǎng)頁應用。1.3.1 主流框架jQueryMobile、AngularJS 等。1.3.2優(yōu)勢（1）開發(fā)成本低（2）更新快（3）更新無需通知用戶，不需要手動升級（4）能夠跨多個平臺和終端1.3.3劣勢（1）臨時性的入口（2）無法獲取系統(tǒng)級別的通知，提醒，動效等等（3）用戶留存率低（4）設計受限制諸多（5）體驗較差1.3.4主流應用微信公眾號/訂閱號應用、支付寶

25、服務窗應用等輕量級應用。1.4四種主要開發(fā)模式對比Web App 網(wǎng)頁應用Hybrid AppWeb主體型Hybrid App 多View混合型Native App 原生應用開發(fā)成本低中Native部分成本宥Web部分成本低高維護更新簡單簡單Native部分復雜Web部分簡單復雜儺僉差中優(yōu)優(yōu)性能慢慢較快快原生界面模擬模擬部分模擬原生官方市場認可不認可認可認可認可安裝不需要需要需要需要跨平臺優(yōu)優(yōu)Web部分跨平臺優(yōu)差App級別輕量級輕量級超級App，支持App 中嵌套 MicroApp重量級適應性一般中，對復雜應用 支持較差優(yōu)一般2.1 Web 和 Native 混合WindVane+Hybrid

26、+Native簡介WindVane是阿里內部一種移動端Web和Native混合框架，主要為解決多平臺統(tǒng)一 交互體驗、動態(tài)部署（插件化）等問題，降低開發(fā)成本，提升前端開發(fā)效率。WindVane 是對Native代碼的一種擴展，基礎服務仍然以Native代碼為主?？蚣軐崿F(xiàn)可定制化UI組件資源本地緩存，資源預置打包服務Web與本地功能模塊通信交互Web調用本地功能的JSBridge通信服務Hybrid API jstmall jstaobao jsal i pay jsEwindvane bridgealipay bridge -windvane nativealipay nativetaobao

27、native天貓客戶端淘寶客戶端支付寶錢包2.1.2 AppCan簡介AppCan移動應用快速開發(fā)平臺是基于HTML5技術的跨平臺快速開發(fā)解決方案開發(fā) 者使用HTML5+CSS3+JavaScript技術可以快速的開發(fā)與本地應用相媲美的移動應用，同時 支持 iOS、Android、Symbian、Windows Phone 四大智能操作系統(tǒng).AppCan-SDK 是 AppCan平臺專為開發(fā)者提供的IDE開發(fā)環(huán)境，集成了:1、移動UI框架2、手機設備API 3、 調試模擬器4、離線打包服務5、應用云端管理使移動開發(fā)更加方便快捷.與Phonegap支持單一 webview使用div為單位開發(fā)移動

28、應用不同。AppCan支持多 窗口機制，讓開發(fā)者可以像最傳統(tǒng)的網(wǎng)頁開發(fā)一樣，通過頁面鏈接的方式靈活的開發(fā)移動應 用?；谶@種機制，開發(fā)者可以開發(fā)出大型的移動應用，而不是只能開發(fā)簡易類型的移動應 用。AppCan提供強大的設備調用能力，電話、短信、相機、LBS、傳感器、數(shù)據(jù)庫等常用 的手機功能，開發(fā)者可以通過JS接口調用，輕松構建移動應用。AppCan是Web占主體型Native為輔的開發(fā)框架?？蚣軐崿F(xiàn)HTML5 :支持HTML5開發(fā)，CSS3實現(xiàn)布局優(yōu)化及交互提升原生體驗：引入部分原生UI控件與交互支持（如Action Sheet等）開發(fā)工具：基于Eclipse的開發(fā)工具，集成UI控件與應用管

29、理 模擬器：提供應用全功能模擬器，方便開發(fā)調試UI框架：提供強大的UI框架，更加易于實現(xiàn)頁面布局與父互設備API :支持各種手機設備調用，如電話、相機、傳感器、定位等 本地打包：無需配置環(huán)境，無需編譯，本地一鍵打包云端打包：提供云端打包服務，提供更加個性化的選擇多窗口機制：常見應用只支持單一窗口，多窗口可以有效提高交互體驗 插件機制：支持第三方原生插件，支持JS插件支付支持：相比國外中間件更具本土優(yōu)勢，Not Paypal but ZhiFuBao 代碼加密：基于密鑰的加密方式，無法破解，像混編一樣保P htm l代碼 統(tǒng)計分析：應用分平臺安裝數(shù)統(tǒng)計，應用啟動和使用情況統(tǒng)計開放平臺：更具本土優(yōu)

30、勢，已經對接Sina、QQ、百度等開放平臺 技術支持：技術支持及時響應，重視開發(fā)者建議和反饋架構圖生態(tài)結構：移動端框架:2.2跨平臺原生應用BeeFramework簡介Bee Framework是一款iOS快速開發(fā)框架允許開發(fā)者使用Objective-C和XML/CSS 來進行iPhone和iPad開發(fā)，由Gavin Kwoe和QFish開發(fā)并維護。其早期原型曾經被 應用在QQ空間和QQ游戲大廳等多款精品APP中。Bee Framework包含豐富的組件和 工具。Bee Framework解決了 iOS開發(fā)者長期困擾的各種問題，諸如:分層架構如何設計， 層與層之間消息傳遞與處理，網(wǎng)絡操作及緩存

31、，異步及多線程，以及適配產品多變的UI布 局需求。框架實現(xiàn)代碼注入借助于OC語言特性，Bee將核心邏輯注入到NSObject基類中去，在使用Bee時， 大多數(shù)情況下可以不必修改現(xiàn)有類繼承關系，這樣設計是把雙刃劍，也有可能與您現(xiàn)有方法 名沖突?；贛VC 模型典型的MVC架構，清楚的分為View、Controller. Model三個層次，業(yè)務數(shù)據(jù)、業(yè)務邏輯、界面展現(xiàn)、交互邏輯完全分離。事件驅動對于Controllers Model均與狀態(tài)無關（Stateless），因此由三種Event驅動:Message、Request、Notification。對于View ,我們拋棄掉了老舊的Delega

32、te （語言級實現(xiàn)方式）, 引入新概念UISignal （框架級實現(xiàn)方式）用來驅動界面交互事件或狀態(tài)改變。UlSignalUISignal 擁有極強的路由能力，可以在UIView UIView UIViewController UINavigationController UIViewController 之間完成復雜且高效的的 UI 信號路 由。架構圖Business ModelBusiness ControllerSkeletonCocoaTouchVendor librariesUI BindingThemeUILayoutYour appStandardTemplatesUI Quer

33、yUI EventUI AnimationUl ElementUI ContainerUI TemplateResourceNetworkCacheLocalizationFoundationNativeScript簡介一個開源的框架，可以使用JavaScript開發(fā)跨平臺、真正原生的iOS, Android和 Windows移動App。開發(fā)人員使用NativeScript提供的庫來構建應用UI，其抽象了各種 原生平臺之間的不同。框架實現(xiàn)NativeScript 運行時NativeScript 使用 JavaScript 虛擬機，在 Android 上采用 Google V8 JavaScri

34、pt 引 擎，iOS上采用JavaScriptCore引擎。通過JS解析引擎，在JavaScript和原生語言之間 的轉換，建立跨平臺橋梁。JavaScript虛擬機管理V8知道Android是什么 同理JavaScriptCore也知道iOS是什么)，因為NativeScript 在運行時進行了注入，因為V8擁有一堆讓你配置JavaScript環(huán)境的API。在JavaScript 中您可以使用自定義的C+代碼來分析CPU使用率，管理的JavaScript垃圾收集，等等 一大堆API面對這些API的是幾個Context”類，可以讓你操縱全局變量，從而有可能為 NativeScript注入一個全

35、局的android對象。這實際上使用了與Node.js的相同運行機制， 使全局API可用-如require() - NativeScript使用它注入可以讓你訪問本地代碼的API。 JavaScriptCore的也有類似的機制。Metadata (元數(shù)據(jù))對于NativeScript，反射是讓NativeScript可以調用每個平臺上的API的基石。因為 從性能角度來看重構這些API是很困難的，NativeScript會提前做掉這些，并在 Android/iOS預編繹過程中嵌入預先生成的元數(shù)據(jù)。調用本地代碼NativeScript如何調用本機代碼的答案就在于JavaScript虛擬機的API。

36、我們上次使 用V8的API是注入全局變量。這一次我們將著眼于在JavaScript回調中調用給定的C+ + 代碼。例如，JavaScript 函數(shù)調用的代碼 new android.text.format.Time()，V8 會產生一個 回調。也就是說V8有一個回調，讓NativeScript攔截函數(shù)調用，然后用自定義的C +代 碼執(zhí)行一些動作，并返回一個新的結果。在Android中的情況下，NativeScript運行的C+代碼不能直接訪問Java API，如 android.text.format.Time。然而，Android 的 JNI，或 Java 本地接口，提供了 C+ 和 Jav

37、a之間的橋接能力，所以NativeScript使用JNI完成轉發(fā)。在iOS中這個橋梁是不必要 的，因為C+代碼可以直接調用Objective-C的API。結構圖NativeScript ModulesReact Native簡介React Native使你能夠使用基于JavaScript和React 一致的開發(fā)體驗在本地平臺 上構建世界一流的應用程序體驗。React Native把重點放在所有開發(fā)人員關心的平臺的開 發(fā)效率上開發(fā)者只需學習一種語言就能輕易為任何平臺高效地編寫代碼。Facebook 在多個應用程序產品中使用了 React Native，并將繼續(xù)為React Native投資?？蚣?/p>

38、實現(xiàn)原生的iOS組件可使用標準平臺組件，比如iOS平臺上的UITabBar和UINavigationController。 這可以讓你的應用程序擁有和原生平臺一致的外觀和體驗，并保持較高的品質。使用相應的 React組件，如iOS標簽欄和iOS導航器，這些組件可以輕松并入你的應用程序中。異步執(zhí)行JavaScript應用代碼和原生平臺之間所有的操作都是異步執(zhí)行，并且原生模塊也可以 使用額外線程。這意味著我們可以解碼主線程圖像，并將其在后臺保存至磁盤，在不阻塞UI 的情況下進行文本和布局的估量計算，等等。因此，React Native應用程序的流暢度和響 應性都非常好。通信也是完全可序列化的，當運

39、行完整的應用程序時，這允許我們使用 Chrome Developer Tools來調試JavaScript，或者在模擬器中，或者在真機上。觸摸處理iOS有一個非常強大的系統(tǒng)稱為Responder Chain,可以用來響應復雜視圖層級中的 事件，但是在Web中并沒有類似功能的工具。React Native可實現(xiàn)類似的響應系統(tǒng)并提 供高水平的組件，比如TouchableHighlight,無需額外配置即可與滾動視圖和其他元素適 度整合。彈性框和樣式布局視圖應該是簡單的，所以我們將Web平臺上的彈性框模塊引入了 React Native。 彈性框可用來搭建最常用的UI布局比如代用邊緣和填充的堆疊和嵌

40、入。React Native還 支持常見的Web樣式，比如fontWeight和StyleSheet抽象，它們提供了一種優(yōu)化機 制來宣稱你所有的樣式和布局在組件中的應用是正確的，且組件把它們應用到了內網(wǎng)中。PolyfillsReact Native的重點是改變視圖代碼編寫的方式。接下來，我們注意網(wǎng)絡中普遍的并 把那些API放在適當?shù)牡胤?。可以使用npm安裝JavaScript庫，這些庫用于融入到 React Native 中的頂級功能比如 XMLHttpRequest，window.requestAnimationFrame 及navigator.geolocation。我們正在擴大可用的API，并致力于為開源社區(qū)做出貢獻?？蓴U展性使用React Native無需編寫一行原生代碼即可創(chuàng)建出一款不錯的應用程序，并且 React Native可通過自定義原生視圖和模塊來進行擴展-也就是說你可以重用你已經構建 的任何內容，并且可導入和使用你最喜歡的原生庫。