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

相关推荐
এ慕ོ冬℘゜2 分钟前
前端基础:什么是时间戳?JS获取时间戳三种方法与实战用途
开发语言·前端·javascript
hoLzwEge11 分钟前
拯救低效调试!code-inspector-plugin 让代码定位如虎添翼
前端·前端框架·node.js
J船长23 分钟前
烂笔头扫盲:LLM Eval 入门:从「感觉挺好」到「数据说话」的工程化落地
前端
skiyee28 分钟前
被多个 UView 系 UI 库 “抄” 的 @uni-ku/root 究竟怎么实现?
前端
鱼毓屿御38 分钟前
从「只会聊」到「边想边做」的跃迁
前端·学习·react.js
sugar__salt1 小时前
Vue3 表单双向绑定与响应式核心 API 技术详解
前端·javascript·vue.js
郝亚军1 小时前
使用Vue 3和Nginx打包和部署Vue.js项目的一般步骤
前端·vue.js·nginx
SmartBoyW1 小时前
CSS弹性布局(Flexbox)学习笔记:从零开始搞懂弹性布局
前端·javascript
用户69371750013842 小时前
从代码生产者到 AI 协作者:软件工程师的角色重构
android·前端·后端
嘟嘟07172 小时前
搞懂 useState 从原生 DOM 到 React 惰性初始化的完整链路
前端·react.js·编程语言