Angular 2搭配React Native

Angular 2的架構讓它有可能使用多種渲染引擎來渲染應用，其中包括React Native。

為Angular 2的基礎架構做出的決定中有一個是將框架分為兩個層級：一層是核心，其處理組件，指令，過濾器，服務，路由，修改檢查，DI和 I18n；另一層是渲染引擎，其處理DOM，CSS，動畫，模板，web組件，自定義事件等等。核心可以在獨立的進程中執行，這樣就將其從界面中解耦出來，而且在核心有很多的任務要處理時，這樣可以讓界面的響應更快。關于這個決定的詳細內容可以在 Angular 2渲染架構 文檔中找到。

傳統上渲染一個Angular.JS應用是通過DOM在瀏覽器中完成的，但是現在有可能通過其他的渲染引擎來渲染應用，包括桌面的或者移動端的原生渲染引擎，甚至還有服務器端。 Angular 2渲染 一文中更加仔細地解釋了如何使用不同的渲染引擎來完成此工作。

從主應用中將渲染獨立出來有多種益處。 據Google的工程師主管Brad Green說 ，Angular 2應用可以運行在Node.js上，而且速度相當快。“你可以在此環境下運行Photoshop，所以為何不呢？”，Node.js提供了文件系統，進程和硬件所需的入口。而且，Angular 2可以通過 Angular Electron 運行在桌面上，或者在 微軟的UWP上 。

在移動設備端，Angular 2提供了一些選擇項比如 Ionic 2 ， NativeScript 或者React Native。對于最后一個，有個 庫 使得用React Native渲染Angular 2應用變得有可能。開發者可以調用所有React Native提供的API和polyfill來使用iOS和Android的原生功能，然后回調可以按需在 Angular Zone 中執行。 據Marc Laval所說 ，原生移動開發和web開發很類似，除了是使用不同的組件而不是HTML和CSS提供的那些：

• 通用組件：Image，Picker，RefreshControl，ScrollView，Switch，Text，TextInput，View，WebView

• Android特定組件：DrawerLayout，PagerLayout，ProgressBar， Toolbar

• iOS特定組件：ActivityIndicator，DatePicker，MapView，Navigator，ProgressView，SegmentedControl，Slider，TabBar

應用風格是按照 React Native的風格 ，手勢是由 Hammer.js 處理的。Laval在下圖中詳細說明了一個React Native + Angular 2應用的架構：

他解釋說：

技術上來說，一個React Native應用運行了三個線程。主要的一個是JS線程，在這里所有的JS代碼可以被執行；它控制了整個應用。其它兩個線程運行著應用的原生的部分：標準主UI線程，和一個“shadow”線程用來測量和布局。

原生和JS這兩塊通過一個橋雙向通信。這意味著有Bridge JS API來獲取原生的功能特性（網絡，地理位置，剪貼板等等）而且可以操作原生的元素，然后原生的事件被傳回到JS模塊。

在不久的將來，Angular 2的團隊計劃創建一個新的動畫模塊，而React Native的團隊打算在原生端獲得更優的性能，而且 非死book會支持UWP 。

來自： http://www.infoq.com/cn/news/2016/04/angular2-react-native