react-native、weex、flutter：移动跨平台开发深度剖析

terry 2年前 (2023-09-23) 阅读数 73 #移动小程序

1.简介

为什么需要跨平台开发？ 跨平台开发本质上是为了增加代码复用，减少开发者适应跨平台差异的工作量，降低开发成本，提高业务聚焦度，提供比Web更好的体验。嗯~通俗点来说就是：省钱又偷懒。

本文主要使用reactive、weex和flutter结合信息视角来详细聊聊跨平台移动开发目前的实现原理、现状和未来。至于为什么我们只谈论它们，因为它们相对于ion和phoneGap来说更加“幼稚”（˶‾᷄ ⁻̫ ‾᷅˵）。

超级完整的多平台开源项目

类型	链接
react-native	github.com❙❙❙‷‷‷‷we‷ github.com/CarGuo/GSYG …
Flutter	github.com/CarGuo/GSYG…

2. 原理与特点

目前移动端的发展情况可以是这样的： react native,

weex. 全部使用 JavaScript 作为编程语言。目前，JavaScript占据了跨平台开发的半壁江山，并趋于“统治世界”。

kotlin-native已经开始支持iOS和Web开发（kotlin已经成为android的第一级语言），也想尝试“统一世界”。

flutter 是 Google 的跨平台移动用户界面框架。 Dart 是 Google 的亲生儿子。毫无疑问，Dart 已经成为 Flutter 的编程语言。下文会提到，作为一个新生巨头，在flutter的官网上也能看到他的身影。颤振也是如此。 “对于世界而言”。

1，React Native -由 Facebook 制作，JavaScript 语言，JSCore 引擎，React 设计模式，本机渲染

1.1，概念架构

“一次学习，随处编写”，代表Facebook 定义 React Native：学习 React 并掌握两种开发技能：web 和 app。 React Native使用React设计模式，但UI渲染、动画效果、网络要求等。由native方实现。开发者编写的js代码通过react-native中间层转换为原生的控件和操作，相比ionic这样的跨平台应用大大提升了用户体验。

总结一下，其实就是利用JS调用原生端的组件来实现相应的功能。

如下图所示，react-native的跨平台实现主要由三层组成。其中，C++实现的动态库（.so）作为适配层的过渡桥梁，实现js端和native端的双向通信交互。。主要是封装了JavaScriptCore，在JavaScriptCore中进行js解析并响应原生执行，所以不存在浏览器兼容性问题。

其中内置的javascriptcore直接在IOS上使用以及官方开源的jsc.so‼。

`1.2。实现原理`

与前端开发不同，React Native中并不是所有的标签都是实际的控件。用JS代码编写的控件的功能类似于Map中的键值。 JS端通过这个key组合Dom，最后native端解析Dom，得到原生控件对应的渲染，比如标签对应标签 ViewGroup♶在安卓中控制。

在react-native JS中，页面运行在独立的线程（称为JS线程）中。作为单线程逻辑，JS Thread 无法处理耗时操作。所以Android中的fetch、获取图像、、❙等操作确实❙以及其他数据操作❙》 okhttp

，壁画、共享首选项等。跨线程也意味着Js线程和原生线程之间的交互和通信是异步的。 
 可见，跨平台的关键在于C++层。大多数时候，开发人员只专注于实现 JS 端代码。 Native端提供的各种Native模块（如Network Requests、ViewGroup控件）和JS端提供的各种JS模块（如JS EventEmiter模块）都会存放在这个C++实现中。双方之间的通信通过 C++ 进行。中存储的映射，最终实现了两端的交互。通信数据和指令将在中间层转换为传输字符串。双向调用流程如下。