我借助 AI,基于 React Native 技术开发了一个 APP,各方面结合在一起,促成我想做这件事。
用的是Cursor,之前在公司网络上使用很丝滑,但是到家里却总是出现网络故障,根本就无法使用,灾难级别。换了个梯子才大幅度改善。
字节的国内版和国外版都未出现过这种情况,很多场景下,免费的也很够用。
- 因为我是从来没做过RN开发的,虽说web端还是有很多共性。想试一下全靠自然语言和AI沟通能否完成。
- 生活中确实存在相关使用需求,
- 市面上现有应用不仅操作繁琐,还存在大量开屏广告,且状态缓存差,再次打开时要么重复出现广告,要么回退到初始状态。
项目地址:xiaodun/sf-app
核心功能
1. 集合管理 (Collection Management)
- 创建与管理:首页展示所有集合,支持新增和删除集合。
- 数据持久化:所有数据存储在本地,支持自动保存和状态同步。
2. 层级与单元系统 (Level & Unit System)
- 层级结构:每个集合包含多个层级(Level),层级内包含多个单元(Unit)。
- 单元编辑:支持编辑单元名称。
- 状态流转:单元可以在"普通"、"推荐"、"回收站"和"收藏"状态间流转。
3. 特性系统 (Features System)
应用提供灵活的"特性"系统,允许用户为单元添加额外的属性维度:
- 全局定义:特性是全局共享的(Global),一旦创建,所有集合中的单元都可以使用。
- 类型支持 :
- 数值型 (Numeric):适合记录分数、数量、等级等(如:评分、数量)。
- 单选型 (Single Choice):适合记录布尔状态(如:是否完成、是否拥有)。
- 管理与应用 :
- 在首页点击"特性管理"可添加、编辑或删除全局特性。
- 在单元详情页或编辑弹窗中,可以为特定单元设置这些特性的具体值。
4. 导入与导出 (Import & Export)
为了方便数据备份、迁移和分享,应用提供了完整的 JSON 数据导入导出功能:
- 导出数据 :
- 在首页点击菜单中的"导出"按钮。
- 系统会将当前应用内的所有数据(包括集合、层级、单元、特性、收藏记录等)打包成一个 JSON 字符串。
- 该字符串会自动复制到您的系统剪贴板,您可以将其粘贴到备忘录、微信或其他地方保存。
- 导入数据 :
- 在首页点击菜单中的"导入"按钮。
- 将之前导出的 JSON 字符串粘贴到输入框中(或点击"从剪贴板粘贴")。
- 系统会校验数据格式,验证通过后将覆盖当前应用数据,实现数据恢复。
- 注意:导入操作会完全覆盖现有数据,请谨慎操作。
5. 手势交互 (Interactive Gestures)
为了提供流畅且防误触的操作体验,应用实现了定制化的手势系统:
- 滑动操作 :
- 上滑:将单元移动到"推荐"列表。
- 下滑:将单元移动到"回收站"。
- 双击操作 :
- 双击单元格可弹出编辑菜单。
- 修改名称:可以快速修改当前单元的名称。
- 编辑特性:可以设置单元的各项特性值(如评分、状态等)。
- 收藏/取消收藏:可以一键收藏单元并添加收藏理由,或取消已有的收藏。
6. 层级排序系统 (Level Sorting)
- 排序模式:点击右上角菜单进入排序模式。
- 按钮排序 :通过点击单元格右侧的 "上移"/"下移"箭头按钮 调整层级顺序。
开发过程中,从框架搭建到功能实现,全程由 AI 主导完成,也遇到一些卡住的地方。
如删除操作AI设置二次确认弹窗,生成的代码在逻辑层面看似没有问题,实际运行时弹窗却并未弹出,导致点击操作毫无响应。而我如果只跟AI说点击没有反应,他是无法解决这个问题,最后我看了代码,明确告诉它时弹窗没有展示。
手势交互适配问题,Web 端的上滑、下移、拖动、双击等操作均能正常运行,但移植到 APP 端直接失效。尝试让AI采用通用解决方案修复,却引发 APP 闪退,最后只能切换为原生策略才解决该问题。
而且在手机上也拿不报错,尝试添加日志功能也没效果,如果只是让AI解决闪退问题,其实是没有一个明确的方案的,导致这个问题卡住了好长时间,再加上我对RN也不熟悉,最后只能让它使用最原生的,才保证了功能,最后就是灵敏度的优化。
打包
打包时通过eas这个命令,先去expo.dev/ 注册账号,在本地登陆后,会对项目做一个初始化,对node版本有要求,一定要在本地安装git。
一开始是通过本地执行npx eas-cli build --platform android --profile preview 其实也是向远程发起了构建指令,构建过程可以通过网页看到,后面使用这个命令会卡住,就直接从网站上构建了。
网站本身就支持从gihub上拉仓库

EAS Build profile 很重要,我的应用要改为preview,对应项目的eas.json有一下配置
json
"preview": {
"distribution": "internal",
"android": {
"buildType": "apk"
}
},
"buildType": "apk" 否则构建出来会是abb文件,不能直接安装。

这个平台有免费次数限制,超出限制后需要等待 18 天才能再次使用。
由于这款 APP 功能相对简单,我便没有在本地搭建安卓环境,也未进行 USB 调试等验证操作,目前整体功能已基本开发完成。