Angular 2搭配React Native

   <p>Angular 2的架构让它有可能使用多种渲染引擎来渲染应用，其中包括React Native。</p>    <p>为Angular 2的基础架构做出的决定中有一个是将框架分为两个层级：一层是核心，其处理组件，指令，过滤器，服务，路由，修改检查，DI和 I18n；另一层是渲染引擎，其处理DOM，CSS，动画，模板，web组件，自定义事件等等。核心可以在独立的进程中执行，这样就将其从界面中解耦出来，而且在核心有很多的任务要处理时，这样可以让界面的响应更快。关于这个决定的详细内容可以在 <a href="/misc/goto?guid=4959671688665532211" rel="nofollow,noindex">Angular 2渲染架构</a> 文档中找到。</p>    <p>传统上渲染一个Angular.JS应用是通过DOM在浏览器中完成的，但是现在有可能通过其他的渲染引擎来渲染应用，包括桌面的或者移动端的原生渲染引擎，甚至还有服务器端。 <a href="/misc/goto?guid=4959671688762697577" rel="nofollow,noindex">Angular 2渲染</a> 一文中更加仔细地解释了如何使用不同的渲染引擎来完成此工作。</p>    <p>从主应用中将渲染独立出来有多种益处。 <a href="/misc/goto?guid=4959671688843139937" rel="nofollow,noindex">据Google的工程师主管Brad Green说</a> ，Angular 2应用可以运行在Node.js上，而且速度相当快。“你可以在此环境下运行Photoshop，所以为何不呢？”，Node.js提供了文件系统，进程和硬件所需的入口。而且，Angular 2可以通过 <a href="/misc/goto?guid=4959671688931054929" rel="nofollow,noindex">Angular Electron</a> 运行在桌面上，或者在 <a href="/misc/goto?guid=4959671689014345285" rel="nofollow,noindex">微软的UWP上</a> 。</p>    <p>在移动设备端，Angular 2提供了一些选择项比如 <a href="/misc/goto?guid=4958985365591347431" rel="nofollow,noindex">Ionic 2</a> ， <a href="/misc/goto?guid=4959671690590070996" rel="nofollow,noindex">NativeScript</a> 或者React Native。对于最后一个，有个 <a href="/misc/goto?guid=4959671690682660382" rel="nofollow,noindex">库</a> 使得用React Native渲染Angular 2应用变得有可能。开发者可以调用所有React Native提供的API和polyfill来使用iOS和Android的原生功能，然后回调可以按需在 <a href="/misc/goto?guid=4959640091619513513" rel="nofollow,noindex">Angular Zone</a> 中执行。 <a href="/misc/goto?guid=4959671690790740850" rel="nofollow,noindex">据Marc Laval所说</a> ，原生移动开发和web开发很类似，除了是使用不同的组件而不是HTML和CSS提供的那些：</p>    <ul>     <li> <p>通用组件：Image，Picker，RefreshControl，ScrollView，Switch，Text，TextInput，View，WebView</p> </li>     <li> <p>Android特定组件：DrawerLayout，PagerLayout，ProgressBar， Toolbar</p> </li>     <li> <p>iOS特定组件：ActivityIndicator，DatePicker，MapView，Navigator，ProgressView，SegmentedControl，Slider，TabBar</p> </li>    </ul>    <p>应用风格是按照 <a href="/misc/goto?guid=4959666808708508351" rel="nofollow,noindex">React Native的风格</a> ，手势是由 <a href="/misc/goto?guid=4958836939228003851" rel="nofollow,noindex">Hammer.js</a> 处理的。Laval在下图中详细说明了一个React Native + Angular 2应用的架构：</p>    <p><img src="https://simg.open-open.com/show/5c9a62537f5b0eca7bf2fcd48dc584a3.png"></p>    <p>他解释说：</p>    <p>技术上来说，一个React Native应用运行了三个线程。主要的一个是JS线程，在这里所有的JS代码可以被执行；它控制了整个应用。其它两个线程运行着应用的原生的部分：标准主UI线程，和一个“shadow”线程用来测量和布局。</p>    <p>原生和JS这两块通过一个桥双向通信。这意味着有Bridge JS API来获取原生的功能特性（网络，地理位置，剪贴板等等）而且可以操作原生的元素，然后原生的事件被传回到JS模块。</p>    <p>在不久的将来，Angular 2的团队计划创建一个新的动画模块，而React Native的团队打算在原生端获得更优的性能，而且 <a href="/misc/goto?guid=4959671690934196896" rel="nofollow,noindex">非死book会支持UWP</a> 。</p>    <p>来自： <a href="/misc/goto?guid=4959671691017749097" rel="nofollow">http://www.infoq.com/cn/news/2016/04/angular2-react-native</a></p>