SuperAPI AI 工具集

ionic-react

前端与建站

查看项目

更新于 10-15 21:39

技能介绍

用途:为构建可投产的 Ionic Capacitor 移动应用提供 React 侧开发规范,覆盖项目搭建、路由、页面与跨切面逻辑。

主要能力:提供项目创建、结构、应用配置(main.tsx、App.tsx、i18n/index.ts)、路由(IonReactRouter、tab 路由)参考;页面包括 onboarding 守卫、onboarding 页(视频背景 + Swiper)、paywall 页(RevenueCat)、tabs 布局(含横幅广告生命周期)、设置页;跨切面含主题/引导/广告/内购/通知等 Hook、react-i18next 国际化与最佳实践。原生插件主题位于 ../ionic-shared/references/。

必要页面:Onboarding(滑动式、全屏背景视频 + 渐变遮罩)、Paywall(RevenueCat,周/年,紧随 onboarding 后展示)、Settings(语言、主题、通知、去广告、重置引导)。

导航:必须使用 IonTabs + IonTabBar,禁止自建标签栏或引入第三方标签库。

必需依赖:npm install @capacitor/preferences @capacitor/push-notifications @capacitor/splash-screen @capacitor/status-bar @revenuecat/purchases-capacitor @capacitor-community/admob react-i18next i18next i18next-http-backend swiper

硬性规则:禁用类组件,使用函数组件 + Hook;禁止直接操作 DOM,改用 ref/state;仅从 @ionic/react 导入,不得引用 @ionic/angular 或 @ionic/vue;禁止 any 类型;每个页面用 <IonPage> 包裹。

限制:本文件是 SKILL 指南而非项目,切勿在此运行 npm install;创建新项目需询问路径或在独立目录搭建。完成前需运行 npm install、npm run build、npx cap sync,构建须无错误,每次 web 构建后同步原生前都需 cap sync。具体收费与效果暂未提供。