1.Weex原理及架构剖析
2.Expo 搭建 React-native 项目代码目录分析
3.如何评价 React Native
4.如何编译ReactNative示例程序Examples
5.ReactNative资源更新增量包的码分优化实践
6.React Native UI界面还原，组件布局与动画效果

Weex原理及架构剖析

       早期的码分H5和Hybrid解决方案依赖客户端App内置浏览器（webview），通过前端H5开发实现跨平台应用，码分如PhoneGap、码分cordova和ionic等。码分这些方法简化了开发流程，码分项目源码阅读但H5性能与客户端性能存在显著差距。码分Facebook的码分ReactNative引入了新的解决方案，旨在解决这一问题。码分

       ReactNative强调“learn once write anywhere”，码分而Weex则提出了“write once run anywhere”，码分在灵活性和适应性上更胜一筹。码分选择Weex的码分开发者可以参考官方文档weex.apache.org/zh/guid...

       Weex的架构核心在于初始化阶段创建的JS执行环境，类似于浏览器的码分V8引擎或客户端的JS Core，为所有页面提供共享的码分运行环境，提高性能。weex-vue-framework是基于Vue.js改造的框架，负责将Vue指令转化为原生组件渲染指令，文华背景变色源码通过前端与原生的分离，优化了性能，如分离业务代码和框架依赖。

       通信方面，Weex使用WXBridge实现JS与客户端的双向通信，确保跨环境的顺畅交互。至于Weex的工作原理，主要分为三步：首先将源码转换为类JSON数据结构，处理数据绑定，并定义返回数据的函数原型。这些步骤共同支撑起Weex的跨平台应用开发能力。

Expo 搭建 React-native 项目代码目录分析

       创建React-native项目时，Expo提供了多种工具简化开发过程。根据项目需求，选择不同的模板：空白模板（blank）适合演示、组件预览和个人项目；带有底部tab菜单的模板（tabs）；需要直接控制原生代码时选择（minimal）；遇到未知问题则选择RN方式。[1]

       React Native的pubg易语言源码典型目录结构包括以下几个部分：[2]

       src：存放组件源代码，是项目开发的核心目录。

       test：用于编写和运行组件的测试用例。

       demo：包含一个独立的Expo项目，App.js是核心文件，通过引用src中的组件进行展示和开发。

       其他文件如.eslintrc.js, babel.config.js, README.md, .gitignore, package.json等，分别负责代码风格规范、编译配置、项目介绍和版本管理。

       引入Expo时，需注意src目录与demo目录的配置协调，以确保metro（打包工具）能够正确处理。首先安装Expo CLI，然后创建项目，通过yarn start预览组件。配置metro时，重点在于新版本的趋势组合指标源码metro.config.js，用于添加providesModuleNodeModules，解决src目录依赖的解析问题。[3]

       总结起来，开发过程中App.js是关键，负责组件的集成和展示。app.json和package.json分别用于设置应用配置和依赖管理。assets存放资源文件，babel.config.js用于代码转换，index.js是应用入口，metro.config.js负责项目打包，而yarn.lock则保证了依赖版本的一致性。eas.json则提供了EAS平台的云构建和部署选项。每个文件都有其特定的功能，共同构建React-native项目的开发流程。[4]

如何评价 React Native

       React native充分利用了Facebook的现有轮子，是一个很优秀的集成作品，并且我相信这个团队对前端的了解很深刻，否则不可能让Native code「退居二线」。

       å¯¹åº”到前端开发，整个系统结构是这样：

       JSX vs HTML

       CSS-layout vs css

       ECMAScript 6 vs ECMAScript 5

       React native View vs DOM

       æ— éœ€ç¼–译，我在第一次编译了ipa装好以后，就再也没更新过app，只要更新云端的js代码，reload一下，整个界面就全变了。

       å¤šæ•°å¸ƒå±€ä»£ç éƒ½æ˜¯JSX，所有Native组件都是标签化的，这对于前端程序员来说，降低了不少学习成本，也大大减少了代码量。不信你可以看看JSX编译后的代码。

       å¤ç”¨React系统，也减少了一定学习和开发成本，更重要的是利用了React里面的分层和diff机制。js层传给Native层的是一个diff后的json，然后由Native将这个数据映射成真正的布局视图。

       css-layout也是点睛之笔，前端可以继续用熟悉的类css方式来编写布局，通过这个工具转换成constrain布局。

       ç³»

       ç»Ÿåªæœ‰js-objc的单向调用，就是把原生UI组件的方法通过javascritcore或者webview（低版本iOS）映射到js中来，整个调用

       è¿‡ç¨‹æ˜¯å¼‚步的，这样的设计令React native可以让js运行在桌面chrome中，通过websocket连接Native

       code和桌面chrome，极大地方便了调试。对其中的机制Bang的一篇文章写得很详细，我就不拾人牙慧了：React Native通信机制详解 « bang’s blog 。但这样设计也会带来一些问题，后面说。

       ç‚¹æŒ‰æ“ä½œä¹Ÿè¢«æŠ½è±¡æˆäº†ä¸€ç»„组件（TouchableXXX），这种抽象方式是我在之前做类似工作中没有想到的。facebook还列出Native为什么和web「手感」不同的原因：实时的点按反馈和取消能力。React Native 这套相应机制设计得很完善，能像Native code那样控制整个点按操作的所有过程。

       Debug

       ç›¸å½“方便！修改了js以后，通过内建的nodejs

       watcher编译成bundle，在模拟器里面按cmd+r就可以看到效果。而且按cmd+d，可以打开一个chrome窗口，所有的js都移到了

       chrome里面运行，所以什么断点单步打调用栈，都不在话下。

       ä¸Šé¢çš„既是特点也是优点，下面说说缺点，或者应该说：「仍然遗留的问题」，在我看来，这个方案已经超越了Hybird方案。

       ç³»

       ç»Ÿä»ç„¶ï¼ˆä¸å¾—不）依赖原生组件暴露出来的组件和方法。举两个例子，ScrollView这个组件，在Native层是有大量事件

       çš„，scrollViewWillBeginDragging，

       scrollViewWillEndDragging，scrollViewDidEndDragging等等，这些事件在现有的版本都没有暴露，基本上

       åšä¸äº†ç»„件联动效果。另外，这个版本中有大量组件是iOS

       only的：ActivityIndicatorIOS、DatePickerIOS、NavigatorIOS、PickerIOS、

       SliderIOS、SwitchIOS、TabBarIOS、AlertIOS、AppStateIOS、LinkingIOS、

       PushNotificationIOS、StatusBarIOS、VibrationIOS，反过来看，剩余的都是一些抽象程度极强的基本组件。这

       æ ·ï¼Œç”¨æˆ·å¿…须在不同的平台下写两套代码，而且所有能力仍然强烈依赖 React native 开发人员暴露的接口。

       ç”±äºŽæœ€å¤–层是

       React，初次学习成本高，不像往常的Hybird方案，只要多学几个JS

       API就可以开始干活了。当然，React的确让后续开发变得简单了一些，这么一套外来的（基于iOS）、残缺不全的（css-layout）在

       React的包装下，的确显得不那么面目可憎了。

       å¦å¤–，React Native仍然很不完善。文档还不全，我基本上是看着他的示例代码完成的demo，集成到已有app的文档也是今天才出来。按照官方的说法，Android版本要到半年后才发布：Blog | React ，届时整个系统设计可能还会有很大的变化。

       PS，在使用Tabbar的时候，我惊喜的发现他们居然用了iconfont方案，我现在手头的项目中也有同样的实现，不过API怎么设计一直很头疼。结果，我发现他是这么写的：

       <TabBarItemIOS

        name="blueTab"

        icon={ _ix_DEPRECATED('favorites')}

       ....>

       åœ¨ _ix_DEPRECATED 的定义处，有一句注释： // TODO(nicklockwood): How can this fit our require system?

       ä»¥ä¸Šã€‚

       ä¸‹é¢æ˜¯ä¸€å‘¨å‰ï¼Œåœ¨React native还没开源的时候，通过反解ipa的一些分析过程，有兴趣的可以看看。

       ------------------------简单粗暴的分割线--------------------

       èƒŒæ™¯å’Œè°ƒç ”手段

       React

        Native还没开源，最近和组里兄弟「反编译」了Facebook Group（这个应用是用React

       Native实现的）的ipa代码，出来几百个JS文件，格式化一下，花了几天时间读了一下源码，对React

       Native的内部核心机制算是有了一个基本了解。

       React Native的核心实现：

       å…ˆç®€å•è¯´å‡ ç‚¹ï¼Œè¯¦ç»†çš„等回头更新。

       1. React Native里面没有webview，这货不是Hybrid app，里面执行JS是用的

       JavascriptCore。

       2. 再说React Native的核心，iOS Native code提供了十来个最基本核心的类（RCTDeviceEventEmitter、

       RCTRenderingPerf等）、或组件（RCTView、RCTTextField、RCTTextView、

       RCTModalFullscreenView等），然后由React Native的JS部分，组成二十来个基本组件（Popover、Listview等），交由上层的业务方来使用（THGroupView）。

       3. 就如他们在宣传时所说，他们实现了一套类似css的子集，用来解决样式问题，相当复杂和强大，靠这个才能将Native的核心组件组成JS层的基本组件再组成业务端的业务组件，应该是采用facebook/css-layout · GitHub的C语言版本实现的（在ppt中我们看到了类似flex-direction: column一类的代码，这个正是css-layout支持的语法）。

       4. 在React Native中，写JS的工程师解决的是「将基本组件拼装成可用的React组件」的问题，写Native Code的工程师解决的是「提供核心组件，提供足够的扩展性、灵活性和性能」的问题。

       React Native的设计考虑：

       ReactJS对React Native有着直接的影响（我没在生产环境中用过React，只看过代码&用过Angular，如果有误请指出）

       ReactJS里面有这样的设计：

       1. ReactJS 的大工厂入口createElement返回的不是某个实体DOM对象，而只是一个数组

       2. 通过源码中 ui/browser/ 目录中的代码，将这个数组转换成DOM

       3. 底层的渲染核心是可以更换的

       å¦å¤–，Facebook自己有JSX，css-layout等开源项目，基于这些，如果要做一个用 JS来开发Native app的东西，很自然就想到了一套最有效率的搞法：

       1. 将 ui/browser 里面的代码替换成一套 Native 的桥接JS（实际上，iOS版是通过

       injectGenericComponentClass方法，将核心组件的方法注入到JS里面 ），就直接复用React的MVVM，自动将数据映射到Native了

       2.

        Native

       code里面实现三组核心API，一组提供核心组件的API（create、update、delete），一组事件方法（ReactJS里面的

       EventEmitter ），一组对css进行解析（css-layout）以及返回Style的ComputedStyle（React

       Native里面叫meatureStyle）。

       è¿™æ ·ï¼Œç”¨ä¸Šäº†ReactJS本身的所有核心功能和设计思路，Native的开发也足够简单。

       é‚£ï¼ŒReact Native是什么？

       å…¶å®žè¿™ä¸œè¥¿ä»ŽNative开发来说，相当于重新发明了一个浏览器渲染引擎并且套一个React的壳，从Web开发角度来说，就是把原来React的后端换成了Native code来实现，就跟Flipboard最近搞的React Canvas 一样： Flipboard · GitHubreact-canvas

       React Native的优势和劣势：：

       ä¼˜åŠ¿ç›¸å¯¹Hybird app或者Webapp：

       1. 不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题

       2. 有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用

       3. 可以直接使用Native原生的「牛逼」动画（在FB Group这个app里面，面板滑出带一点果冻弹动，面板基于某个点展开这种动画随处可见，这种动画用Native code来做小菜一碟，但是用Web来做就难上加难）。

       ä¼˜åŠ¿ç›¸å¯¹äºŽNative app：

       1. 可以通过更新远端JS，直接更新app，不过这快成为各家大型Native app的标配了…

       åŠ£åŠ¿ï¼š

       1. 扩展性仍然远远不如web，也远远不如直接写Native code（这个不用废话解释了吧）

       2.

       ä»ŽNative到Web，要做很多概念转换，势必造成双方都要妥协。比如web要用一套CSS的阉割版，Native通过css-layout拿到最终样

       å¼å†è½¬æ¢æˆnative原生的表达方式（比如iOS的Constraint\origin\Center等属性），再比如动画。另外，若Android和

       iOS都要做相同的封装，概念转换就更复杂了。

       æ›´æ–°1：添加了React对React Native的影响。

       æ›´æ–°2：基本确定其使用了 css-layout，添加了对React Native的总结

       æ›´æ–°3: React native已经开源了： React Native，只有iOS版。我写了几个demo，简单看了看objc代码并和开源前的我们的一些结论（见后文）交叉验证。简单地从前端工程师和系统整体角度说一下React native的特点和优劣吧。

       æ›´æ–°4: 补充了几条优势和与前端开发的对照

如何编译ReactNative示例程序Examples

       ã€€ã€€ç¼–译示例程序需要将整个项目导入到androidStudio中，androidStudio导入项目时选择react-native/ReactAndroid目录。

       ã€€ã€€ç”±äºŽé¡¹ç›®ä¾èµ–ndk因此如果要编译Examples还需要安装配置ndk目录，下载ndk后是一个自解压程序，会释放ndk的目录。

       ã€€ã€€ç„¶åŽéœ€è¦è®¾ç½®çŽ¯å¢ƒå˜é‡æˆ–者在react-native根目录下新建local.properties文件，文件内容如下：

       ã€€ã€€sdk.dir=c:\你的sdk目录

       ã€€ã€€ndk.dir=c:\你的ndk目录

       ã€€ã€€è®¾ç½®è¦ä¹‹åŽå°±å¯ä»¥ç¼–译了，导入和编译的过程比较曲折，请继续看下文。

       ã€€ã€€åœ¨ç¼–译AwesomeProject项目时，没有用到ndk，实际上这里的ndk默认情况下并没有用到，只是gradle的设置里有ndk因此必须配置ndk才能导入项目。

       ã€€ã€€ndk是在编译核心库是才用到，核心库位于react-native/ReactAndroid，导入整个项目时以lib形式存在。查看Examples目录下UIExplorer，会发现在build.gradle是以在线的方式导入核心库的。通过源码的方式导入被注释掉了。

       ã€€ã€€dependencies {

       ã€€ã€€compile fileTree(dir: 'libs', include: ['*.jar'])

       ã€€ã€€compile 'com.android.support:appcompat-v7:.0.1'

       ã€€ã€€// Depend on pre-built React Nativecompile 'com.facebook.react:react-native:0..+'

       ã€€ã€€// Depend on React Native source.

       ã€€ã€€// This is useful for testing your changes when working on React Native.

       ã€€ã€€// compile project(':ReactAndroid')

       ã€€ã€€}

       ã€€ã€€ç”±æ­¤å¯çŸ¥ï¼Œç¼–译UIExplorer并不需要ndk，如果你不想设置ndk，有2个办法

       ã€€ã€€1.拷贝AwesomeProject项目中的build.gradle，settings.gradle到UIExplorer的android目录，在导入项目时选择UIExplorer/android就可以了，这样androidStudio会导入单个项目，否则会导入整个项目。

       ã€€ã€€2.用androidStudio新建一个同名的项目，然后把UIExplorer目录中的文件拷贝到新建的项目中。

       ã€€ã€€ç¼–译好之后启动服务器端，到react-native目录下执行:

       ã€€ã€€npm install

       ã€€ã€€node packager\packager.js

       ã€€ã€€windows下如果出现错误需要根据错误提示修改代码blogs.com/zhaojietec/p/.html

       ã€€ã€€ä¸è¿‡éœ€è¦æ³¨æ„çš„是，目前为止，UIExplorer在Android下有一个bug，IOS下没有问题，通过google可以找到了解决办法。/post/

React Native UI界面还原，组件布局与动画效果

       React Native UI和写Android XML布局布局在本质上相似，个人感觉差异不大。源码副图指标

       在《ReactJS到React-Native，架构原理概述》中提到，在web环境中，React框架，JSX源码通过React框架最终渲染到了浏览器的真实DOM中。而在React Native框架中，JSX源码通过React Native框架编译后，通过对应平台的Bridge实现了与原生框架的通信。如果在程序中调用了React Native提供的API，那么React Native框架就通过Bridge调用原生框架中的方法。底层为React框架，UI层变更映射为虚拟DOM进行diff算法，diff算法计算出变动后的JSON映射文件，最终由Native层将此JSON文件映射渲染到原生App的页面元素上，实现了通过控制state和props的变更引起iOS与Android平台UI的变更。编写的React Native代码最终会打包生成一个main.bundle.js文件供App加载，此文件可以在App设备本地，也可以存放于服务器上供App下载更新。Yoga是一个使用C语言实现的CSS3/Flexbox的跨平台布局引擎，旨在打造一个兼容iOS、Android、Windows平台在内的布局引擎，让界面布局更加简单。Yoga通过实现许多设计师熟悉的API并对外开放。利用Yoga，目前已经被用于React Native和Weex等开源项目中，虽然只实现了W3C标准的一个子集，但在样式方面也有一定的应用。

       核心组件和API在React Native中可以通过reactnative.cn/docs/components/查找。为了给React-Native组件加上样式，需要在JavaScript中添加样式表。Flexbox是构建响应式App的最佳选择，虽然CSS在React Native中的表现不太一致，且React Native并不是为web元素设计的，不能像web应用在html中使用CSS。但Weex在这方面具有优势。React和宿主平台之间的桥接包含了一个缩减版CSS子集的实现，主要通过flexbox进行布局。使用内联样式，通过JavaScript对象进行样式组织，这也是React团队先前在Web环境中推荐的。对于复杂的样式，建议使用StyleSheet.create来集中定义组件的样式，这可以弥补编写复杂样式时不能使用CSS的不便。

       RN中的宽高可以直接通过style指定，尺寸是无单位的，表示与设备像素无关的逻辑像素点。在组件样式中使用flex可以使组件在可利用的空间中动态地扩张或收缩。与Android LinearLayout的layout_weight类似，值越大，组件获取剩余空间的比例越多，但RN的优先级高于width。使用flex布局，可以与Android类似地调整组件的优先级。

       在动画方面，React Native提供了两个互补的动画系统：用于创建精细交互控制的Animated和用于全局布局动画的LayoutAnimation。Animated旨在以声明的形式定义动画的输入与输出，建立一个可配置的变化函数，通过start/stop方法控制动画的执行顺序。配置动画具有高度灵活性，包括自定义或预定义的easing函数、延迟、持续时间、衰减系数、弹性常数等。配置动画时，可以通过parallel、sequence、stagger和delay组合使用多个动画。默认情况下，如果任何一个动画停止或中断，组内所有其他动画也会停止，但可以设置stopTogether属性禁用自动停止。合成动画值可以通过加减乘除以及取余等运算来创建新的动画值。插值可以在动画属性中设置值变化区间，如在接近特定值时改变动画行为。跟踪动态值可以通过设置toValue来实现，同时跟踪多个值。通过启用原生驱动，动画可以在启动前将所有配置信息发送到原生端，利用原生代码在UI线程执行动画，而无需在两端间频繁沟通，从而避免了JS线程被卡住时影响动画的问题。

       LayoutAnimation允许在全局范围内创建和更新动画，这些动画会在下一次渲染或布局周期运行，特别适用于更新flexbox布局。使用LayoutAnimation时，注意它对动画本身的控制不如Animated或其它动画库方便，因此在使用时应谨慎考虑。如果要在Android上使用LayoutAnimation，需要在UIManager中启用。