React Native VS Flutter

框架层面须支持/适配以下功能:

• 蓝牙, 包括搜索、连接蓝牙, 发送蓝牙指令打印
• 串口通信
• 摄像头, 包括拍照和上传本地照片
• 二维码, 最好能支持连续扫描二维码

如插件市场无法满足某一功能的插件, 尚须考虑原生插件开发和接入难度

简表

React Native

• react.dev
• reactnative.dev
• react-native-debugger

特性

• 开发语言为 JavaScript 和 TypeScript

• 主要文件类型为 jsx 或 tsx

• 基于 React 前端框架和 Expo 上层框架, 遵循 UI = f(state) 范式和函数式编程范式

• 基于 babel 构建工具, 可使用 VS Code 或 Web Storm 开发

• 开发时支持热更新, 更新效率较高, 启动速度较慢

• 可借助 Expo Go 在真机上调试

• 须使用 React Native 暴露出的组件:

  import {Text, View} from 'react-native';

  类似 uniapp 的 text、view 等标签, 不同的是 uniapp 会将 html 标签转换为 uniapp 标签, 但 RN 则不会

• 文档和示例较为欠缺, 须借助搜索引擎查找和解决问题, 中文文档

• 使用 Javascript Bridge, 导致效率和性能较低, 尽管最新版本 0.74 在推进 bridgeless 新架构, 但其性能仍不如 Flutter

• JS 生态丰富, 社区有很多 npm 包可供使用, 但其兼容性需要实践才能确定

• 前端人员上手成本低, 可快速上手

• 由于 React 自身特点, 不熟悉 React 的人虽然能写出满足需求的代码, 但代码质量和性能可能有问题, 须做相应的约束和培训

• 使用过多第三方包或官方更新可能会导致破坏式更新, 产品稳定性欠缺

可尝试集成 vite 进行开发以提高开发效率

插件市场

• React Native Directory
• React Native Community

功能

打开相机

• Expo Camera

选择本地图片或拍照

图片相关

• Expo ImagePicker

  选择本地图片或拍照

• Expo Image

  用于渲染图片的组件

• react-native-image-crop-picker

  可编辑、压缩图片

• react-native-compressor

  图片压缩

扫描二维码

• Expo BarCodeScanner

串口通信

• ReactNative 实现 Android 串口通信

蓝牙和打印

• react-native-ble-manager
• react-native-ble-plx
• Expo Print

获取地理位置

• Expo Location

SQLite

• Expo SQLite

网络连接

• NetInfo
• Expo Network

嵌入 Web 网页

• WebView

热更新

• PUSHY

组件库

• User Interface component libraries - Expo

通用包

• axios

  用于发起请求

• TanStack react-query

  通用的请求库, 请求缓存, 重新请求, 请求失败重试等

• msw

  JS 接口模拟工具

• zustand

  React 状态管理工具

• immer

  不可变状态管理

• @react-native-async-storage/async-storage

  Data storage system for React Native.

Flutter

• dart.dev
• flutter.dev

特性

• 声明式 UI 框架, 使用 setState 更新 (无状态管理插件时)
• Debug 下为 JIT (Just in Time) 即时编译; Release 下为 AOT (Ahead of Time) 预编译
• 开发语言 Dart, 为强类型语言, 声明变量须同时声明其类型, 变量类型不可变, 类型不一致时会报错
• 开发时支持热更新, 热更新效率高
• 底层基于 c++ 编写的 skia 图形库, 跨平台兼容性好, 性能较高 (低于原生开发)
• 可使用 VS Code 或 Android Studio 开发和调试, 支持有线和无线真机调试, 自带 devtools
• 布局为类 xml 的嵌套写法, 会出现较多成对的 (), 且布局和样式位于同一文件
• 文档和示例完善, 第三方包生态较为完善, 中文文档
• 自带众多组件, 覆盖绝大部分场景, 仅须使用少量第三方 UI 插件
• 不支持热更新, 社区有 shorebird 方案
• 前端人员上手成本较高, 须熟悉 Dart 语言和 Flutter 布局写法、状态更新等
• 破坏性更新较少, 如锁死 SDK 版本则可一直开发迭代

插件市场

• pub.dev 官方插件市场
• pub-web.flutter-io.cn 插件市场中文站点

功能

组件库

• Flutter 自带多种组件, 已基本涵盖常用组件, 且提供 Android (material) 和 iOS (cupertino) 两种风格组件, 绝大部分情况下无须第三方组件库
• 小型 UI 组件
  • fluttertoast
  • flutter_easyloading

打开相机

• camera

选择本地图片或拍照

• image_picker

• wechat_assets_picker

  基于 微信 UI 的 Flutter 图片选择器（同时支持视频和音频）

图片压缩

• flutter_image_compress

扫描二维码

• mobile_scanner
• flutter_barcode_scanner

串口通信

获取地理位置

• location
• package:location docs

SQLite

• sqflite

网络连接

• connectivity_plus

嵌入 Web 网页

• webview_flutter
• flutter_inappwebview

热更新

基于性能、安全和跨端实现难度的考虑, Flutter 官方仍未将热更新功能列入规划之中, 但社区已有一些热更新实现:

• shorebird
• Remote Flutter Widgets 基于服务端的远程组件, 组件代码由服务端动态下发

Contributors

why

Changelog

Last edited 2 minutes ago

View full history

da5df4d-feat: update