1.什么是源码跨终端
2.Expo 搭建 React-native 项目代码目录分析
3.React Native UI界面还原，组件布局与动画效果

什么是源码跨终端

       链接：/post/

       鉴于很多人对跨端技术感觉很神秘，虽然我实际上还没有写过一个从0到1的源码跨端框架，但是源码我曾经用Yoga(布局引擎Yoga(React-Native)做过一些简单的跨端的事情，后来用了Weex。源码研究跨端有一段时间了，源码闲聊源码app想科普一下。源码

       科普之前，源码首先你要知道，源码为什么需要跨端技术？我们通常会把Weex和React-Native(本文统称为RN)说成是源码跨端技术吗(Flutter没有单独提到)？

       其实不是，好像Android/iOS本来是源码两个人的，但最终变成了一个人。源码我的源码人力减少了一半！

       但前提是源码这个人力需要懂Android，iOS，源码JavaScript，更懂，不然出了问题，怎么修？

       所以在中国的互联网环境下，很难招到这样的人。大家都在研究PPT架构技术，职场生存理论，岁如何解脱财富。我们如何有时间扩展我们的技术堆栈？

       端上开发很惨，总有崩溃(使用崩溃，闪退)而且没有办法远程修复。只能等下一个版本给使用市场推一个修复bug的新版本。

       但如果推送新版本，用户可能不会升级。因此，许多公司研究了各种热修复框架，尤其是在Android平台上。有很多热修复框架，主要是由DexClassLoader来完成。

       但是，最早的时候，WebView有一个很大的问题，尤其是Android。而且加载网页肯定要花时间，mysql排序源码过程中屏幕会一片空白等等。所以很多人围绕这些做了很多优化。我个人觉得最有用的其实是线下套餐。同时，每一代WebView也在更新升级。然后一些有实力的公司开发了自己的所谓浏览器内核，各种黑科技，如何提速，支持各种特性等等。但是好像没有开源：dog:

       不算。这只是跨安卓和iOS，不把我的PC当目的？

       其实浏览器是跨端的，每个平台都可以用Chrome(其他浏览器主要是想做不做)！但是它也有自己的问题，因为各家都有自己的浏览器，内核不同，划分越来越大。chrome(Blink)/Safari(WebKit)/Firefox(Gecko？)等等，尤其是对css的支持。

       Developer.mozilla.org/zh-CN/docs/.这个网站可以检查一些浏览器的兼容性。例如，边框宽度的兼容性如下：

       其实也不是不可以，但是这样做相当于直接为OpenGL或者其他图形引擎编程，而且要自下而上的搭建一套渲染机制，打包各种基础UI组件给开发者使用，或者留下很多漏洞让开发者自定义自己的UI，非常复杂。但其实Flutter就是这么做的，所以Flutter2.0又开始向桌面端发展了，而且不局限于Android/iOS，但不知道能走多远。还有的是搞React-Native-Skia的，所以用js代码直接调Skia(2D图形渲染引擎)？(具体没看过)

       你写的JavaScript代码为什么能运行？这取决于JavaScript引擎。

       扔给它一段js代码(实际上是一个文本字符串)，它就能帮你计算结果，处理逻辑。

       常见的Weex、RN、嘀嗒软件源码Hippy也依赖于此(MLN使用Lua)进行逻辑处理。

       这个时候会有很多概念。

       有些人喜欢把JavaScript引擎称为JavaScriptCore(不知道为什么，可能是因为iOS开发者才是研究这些比较深入的人，因为苹果的JavaScript引擎叫JavaScriptCore。苹果的这个JavaScriptCore呢？很多人喜欢称之为JSCore或者JSC)。所以，后来看到这些名词，我总是把它们带入语境中去感受他想说的是JavaScript引擎还是苹果的JavaScript引擎 JavaScript Core (JSCore/JSC)。

       先说JavaScript引擎。

       是的，有这么多！当然还有JavaScriptCore(不在图中)。

       最后一行是跑分，越多越好。有JIT的V8在3w挂所有东西。其中QuikJS极小，得分很高。估计很多人会用QuikJS做跨端JavaScript引擎吧？赫尔墨斯是由脸书创造的。看来Android目前在RN中使用的JavaScript引擎已经取代了之前使用的JavaScriptCore。RN为什么一直不用V8？这个我也不知道.

       但是很多人都在搞Android的V8项目，Github上也有一些开源项目。其次，iOS不支持JIT，有自己的JavaScriptCore，没有JIT改V8似乎意义不大。

       一个正常的跨端框架最简单的情况如下(后面会讨论问题，逐步丰富):

       用一个

       简单的例子看

       假设我的 js 文件中就是要 展示一个红色的 div 方块 。那么首先，端会把这个文本传给 JavaScript Runtime，它解析完后形成一个约定的格式，比如如下的 JSON 格式(里面的值用来描述是一个*红色方块，我随便定义的)

       { "name":"div", "width":"", "height":"", "background":"red"}

       通过 JavaScript Runtime 和 端(Android/iOS) 通信，把这个消息传回去。

       端拿到了消息，发现要创建一个 * 的叫做 div 的东西，没有 div 啊！这就需要端上提前埋好代码，vue源码练习比如 Android 里有 FrameLayout，那么就有类似的注册代码

       // 伪代码register("div", FrameLayout.class);

       然后端就知道了，oh！我需要创建一个长宽的正方形。

       首先，这是框架设计提前思考好的，究竟要支持哪些基础组件，比如 image 、text 等等。而且一般这里都会开个口子，让开发者可以自己扩展组件，比如你需要一个横滑列表，没提供怎么办？看看 div 怎么注册的，按照它的过程注册一个列表就好了。这也可以 PPT 吹成： 扩展跨端框架 ，其实 门槛比自定义 View 还要低 。

       前面说了 JavaScript Engine，这里咋又来了个 Runtime？

       JavaScript Engine 能做什么？

       什么都做不了，只能解析执行 js 代码

       那么问题来了，我怎么去 描述 我写的 js 代码代表的 视图 呢？其实不用描述，js 代码只要在 内存中 维护好一个树形结构就好了，就是一个 Object，因为实体在具体的端上，怎么理解呢？

       左边只要在内存中维护好这样一个树形结构就好了，传递给客户端时，转为

       { "name":"div", "children":[ { "name":"image" }, { "name":"div", "children":[] } // 等等 ]}

       端上拿到消息，创建视图为右图中的结构即可。

       如何维护好这个模型呢？调用什么 js 的方法发送消息呢？怎么给这些个 div 加上 css 来描述它的大小形状呢？等等更复杂的一系列的前端问题，都需要 写代码 来实现。

       所以一般都会有个 core.js 或者 framework.js 类似的一堆 js 代码，就是用来处理这些事情，而这些代码同样依靠 JavaScript Engine 来执行。

       从而所谓的 JavaScript Runtime ，我觉得可以单纯的理解为 JavaScript Engine 自身的代码跑起来后的环境，也可以理解为 core.js 等被跨端框架所需要的、包含了各种逻辑的前端代码被加载运行后的环境。

       当你用这些跨端框架的时候，你会发现他们只支持 css 子集 ，tabbar的源码而且布局方式基本都是 flexbox(一种布局模型) 。

       那么比如你写了一个横着容纳了三个小方块的大方块，你的前端 css 代码肯定要写成， flex-diretion:row ，那么抛给端上的消息可能如下：

       { "name":"div", "attribute":{ // 使用布局 "flex-diretion":"row" }, "children":[ { "name":"div" }, { "name":"div" }, { "name":"div" } ]}

       端上拿到这个消息，都不知道 flex-direction 是什么。当然，你可以自己写一个解析库来解，但是 Yoga 帮你做了这件事！

       所以 RN 使用的是 Yoga 布局引擎(支持 flexbox，也是 Facebook 搞的)。

       Weex 似乎一开始是用的 Yoga，后来自己写了一套？

       这个地方就出现了一个名词 Layout Engine ，它就是帮我们处理各种布局参数的，然后帮我们算好每个视图的坐标，然后端上拿到坐标后设置对应的视图的坐标，一个井井有条的视图便展示了出来。如果你觉得你写的布局解析算法超越了 Yoga 等等，那么你完全可以自己写一套。

       比如从 JavaScript Runtime 处理完各种属性了，要渲染视图了！传了一段 JSON 给端。

       端上手指点了一下这个视图，那也要封装成一个消息传递给 JavaScript Runtime，然后触发你之前写的 js 的监听代码，比如点击后弹一个弹窗，那就又要封装一个调用弹窗方法的消息给端。

       就是这样来来回回。

       所以两边都有自己的消息队列。

       而且当你做动画还想监听动画过程的时候，肯定在短时间内发送了大量消息，这些过程肯定是 需要优化 的。

       并且！据我个人用 Weex 的经验，有的 flexbox 属性两端都不统一(可能是 Weex 的 Bug，毕竟 KPI 项目，都不维护了)

       我记得当时还开玩笑说，用了 Weex 终于领悟了跨端的真谛：

       if(platform === 'Andoird') { // 差异化逻辑} else if(platform === 'iOS') { // 差异化逻辑}

       跨端的代价就是，你 本以为 真的可以一套代码两端跑，后来发现真的有点做梦了(连 H5 有时候 Andoird/iOS 都不一致，因为用的内核都不是一个)，代码里有不少的 if-else。

       所以经过上面的一系列科普，一个跨端框架成了这样：

       这其中一般是需要一个客户端、一个前端、一个懂 JavaScript Engine 会 C/C 的来分别开发。

       我虽然没开发过，但是感觉会有很多问题。

       比如 JavaScript Runtime 在另一个进程的话，跨进程通信？

       比如消息通信过于频繁是不是就会有各种连锁反应，掉帧啊、事件响应不及时、动画不流畅啊，怎么优化？

       其实我本身一直自诩喜欢研究原理，但是直至今日我也没真的一行行看过跨端框架的源码，我知道的这些也未必是对的，只是之前做过 Weex 的一些工作稍微研究了一下，还是挺惭愧的。

       既然你自称喜欢研究原理，为什么不看呢？

       链接：/post/

       相关问答：相关问答：手机端和电脑端各是什么？

       电脑端和手机端，实际上说的就是平台问题。

       当我们使用电脑的时候，电脑基本使用的操作平台是windows，或者苹果等常用操作系统。

       而手机上用的平台，如安卓，苹果的IOS，当年诺基亚的塞班，黑莓的系统，都叫做手机端。

       那么怎么定义手机端和电脑端呢，我们可以这么理解，如果用电脑操作系统的设备，即便是平板电脑，你也可以理解成是电脑端。

       如微软平板电脑surface，他的定位是平板也是电脑，

       我们很多的平板，多数使用的是安卓系统，苹果的当然就是IOS，但是平板使用基本使用的移动平台，也就可以看成是手机端。

       但是，如果这个移动设备的平台使用的是电脑的操作系统的时候，他所使用的平台，也就成了电脑端。

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

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

       React Native的典型目录结构包括以下几个部分：[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 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中启用。