通过AI从零开发RN到在安卓手机上运行

我借助 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 调试等验证操作,目前整体功能已基本开发完成。

相关推荐
sure2822 小时前
react native中实现视频转歌
前端·react native
weipt2 小时前
关于vue项目中cesium的地图显示问题
前端·javascript·vue.js·cesium·卫星影像·地形
FanetheDivine2 小时前
图片标注框选组件
前端·react.js
懒大王、2 小时前
Vue3 + OpenSeadragon 实现 MRXS 病理切片图像预览
前端·javascript·vue.js·openseadragon·mrxs
SoaringHeart2 小时前
Flutter最佳实践:路由弹窗终极版NSlidePopupRoute
前端·flutter
子玖2 小时前
antd6的table排序功能
前端·react.js
程序员小李白2 小时前
动画2详细解析
前端·css·css3
eason_fan3 小时前
Rspack核心解析:Rust重写Webpack的性能革命与本质
前端·前端工程化
诗意地回家3 小时前
淘宝小游戏反编译
开发语言·前端·javascript