前言
本文主要介绍 react-native(下称 RN) 的入门, 和前端的异同点
文章不涉及功能的具体实现
选择优势
我们先说说, 为什么很多人会选择使用 RN 、他对应的特性和普通 Web 的区别
- 前端资源, 生态的互通
因为使用的语言是 JS 和 react, 对于前端来说可以无缝切换, 并且他还能使用前端的各类包
在 JS 端, 安卓和 iOS 是同一套代码
- 热更新
很多选择使用 RN 的原因就是有热更新
简单解释下热更新, 在运行 APP 时, js 层我们可以通过接受到的通知, 来进行实时替换, 替换完毕之后一般是要重启 APP 的, 这个时候可以询问用户, 也可以在下次重启时重新载入新的 JS 代码
这样可以保证用户使用的 js 环境, 可以是较新的, 如果是原生 APP 的更新则需要让用户去应用商店重新下载
- 支持原生
RN 通过桥接与原生进行交互, 页面级别的融入原生 APP
他的许多组件, 方法都是调用了原生方法/组件, 相对 webview 来说性能更好
跨端框架横向对比
RN 和 Flutter 的简单对比
环境
无论是 RN 还是 Flutter ，都需要 Android 和 IOS 的开发环境，也就是 JDK 、Android SDK、Xcode 等环境配置，而不同点在于:
- RN 需要 npm 、node 、
react-native-cli等配置 。 Flutter需要flutter sdk和Android Studio/VSCode上的Dart与Flutter插件。
针对前端来说 RN 环境相对友好一点
实现原理
在 Android 和 IOS 上，默认情况下 Flutter 和 React Native 都需要一个原生平台的Activity / ViewController 支持，且在原生层面属于一个“单页面应用”， 而它们之间最大的不同点其实在于 UI 构建 ：
- RN:
React Native 是一套 UI 框架，默认情况下 React Native 会在 Activity 下加载 JS 文件，然后运行在 JavaScriptCore 中解析 Bundle 文件布局，最终堆叠出一系列的原生控件进行渲染。
简单来说就是 通过写 JS 代码配置页面布局，然后 React Native 最终会解析渲染成原生控件，如 <View> 标签对应 ViewGroup/UIView ，<ScrollView> 标签对应 ScrollView/UIScrollView ，<Image> 标签对应 ImageView/UIImageView 等。
- Flutter ：
Flutter 中绝大部分的 Widget 都与平台无关， 开发者基于 Framework 开发 App ，而 Framework 运行在 Engine 之上，由 Engine 进行适配和跨平台支持。这个跨平台的支持过程，其实就是将 Flutter UI 中的 Widget “数据化” ，然后通过 Engine 上的 Skia 直接绘制到屏幕上 。
类似于前端的 canvas 绘图
缺点
- RN:
- 不能完全兼容W3C的规范，比如W3C里面，可以轻易设置圆角的大小，粗细，边框是实现和虚线，但是在客户端，这个实现起来都比较难。所以这类技术都只能有限的支持W3C的标准。
- js运行性能瓶颈。
- 数据通信的性能瓶颈。
- Flutter:
- 无法动态更新。
- 内存和包大小占用。
- 学习成本高，生态不足。