checkin-app/可预览- 写界面用
- JavaScript / TypeScript + React
- 出几个平台
- 一套代码 → iOS + Android
- 网页代码复用
- 接口调用、业务逻辑、状态管理可复用；网页的 div 和 CSS 要换成 View / Text
- 怎么在手机上看
- 手机装 Expo Go，扫二维码就能看
| 功能 | 怎么实现 | 手机预览 |
|---|---|---|
| 打卡列表 + 表单 | React 组件写界面 | ✓ Expo Go 扫码即看 |
手机 App · 选路线
React Native / ExpoCross-platform Framework
React Native 让你用 React 写出 iOS 和 Android 原生界面，Expo 负责预览、打包和上架。能复用的是业务逻辑，界面标签要重写；接第三方原生 SDK 要改用 development build。
把网页版打卡做成 App
默认选了 React Native + Expo。先加「拍照打卡」，再加「微信登录」，看项目卡上的预览列怎么变；也可以切到 Flutter 对照。
任务你已经有一个 React 写的网页版打卡工具，现在让 AI 把它做成 App。先选框架，再往项目里加功能。
加功能：
当前：React Native 用你熟悉的 React 写界面，Expo 负责预览和打包。下一步：往项目里加「拍照打卡」和「微信登录」，看预览列有什么变化。
知识点：会 React，为什么常选 RN + Expo
项目卡上已经演过，这里只给命名。
- React Native：用 React 写界面，跑出来是 iOS 和 Android 的原生控件，一套代码两个平台。
- 能复用的是逻辑，不是标签：接口调用、业务规则能从网页搬；div、CSS 要换成 View、Text 和样式对象。
- Expo：React Native 官方推荐的上手方式，管预览、打包、上架和 JS 热更新。
- Expo Go vs development build：Expo Go 只带 Expo 自己的模块；用到第三方原生 SDK，就要自建 development build。
- Flutter：Google 的方案，用 Dart 语言、自己画界面；两个平台长得一致，但网页的 React 代码用不上。
什么时候用、怎么用
让 AI 选框架前，先说清你会什么、要接哪些原生能力。
- 信号：已有 React 网页、要同时出 iOS 和 Android、团队只会 JavaScript。
- 考虑 Flutter：从零开始、不复用网页代码、很在意两端界面完全一致。
- 考虑两套原生：重度依赖系统能力（如复杂音视频、AR）或对性能要求极高。
- 最短路径：让 AI 用 Expo 建项目 → 手机扫码预览 → 列出所有原生 SDK → 有第三方 SDK 就改用 development build。
正反例：同一句「接上微信登录」
都是 RN + Expo 项目，差别在有没有先问清原生 SDK 怎么预览。
AI 加了配置插件并打出开发版 App，你在手机上扫码就能验收登录流程。
你以为代码坏了，让 AI 反复改。其实是预览方式不对：Expo Go 里根本没有这个原生模块。
快速自测
团队只会 React，已有网页版。AI 建议用 Flutter 重写 App。你最该追问哪一点？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。