# 世博移动应用开发指南 > **重要**：这是一个技能文件，而不是一个项目。切勿在此文件夹中运行 npm/bun install 。切勿在此处创建代码文件。创建新项目时，始终首先询问用户项目路径或在单独的目录中创建它（例如“~/Projects/app-name”）。创建本指南是为了在使用 Claude Code 处理 Expo 项目时提供上下文。 ## 强制性要求创建新的 Expo 项目时，您必须包含以下所有内容： ### 所需屏幕（始终创建） * `src/app/onboarding.tsx` \- 基于滑动的入门，具有全屏背景视频和渐变叠加 * `src/app/paywall.tsx` \- RevenueCat 付费墙屏幕（登录后显示） * `src/app/settings.tsx` \- 包含语言、主题、通知和重置入门选项的设置屏幕 ### 入门视频实施（必需）入门屏幕必须有全屏背景视频。使用 URL，而不是本地文件：从“expo-video”导入{ useVideoPlayer, VideoView }；常量 VIDEO_URL = “https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4”； const 播放器 = useVideoPlayer(VIDEO_URL, (播放器) => { 玩家.循环=真; 玩家.静音 = true; 播放器.play(); }); // 在渲染中： <视频视图玩家={玩家} 样式={StyleSheet.absoluteFill} 内容适合=“封面” 本机控件={假} />; 不要在没有实际使用 VideoView 组件的情况下导入 expo-video。 ### 必需的导航（始终使用） * 使用“expo-router/unstable-native-tabs”中的“NativeTabs”进行选项卡导航 - 切勿使用“@react-navigation/bottom-tabs”或 expo-router 中的“Tabs” ### 所需的上下文提供程序（始终换行）从“@/context/theme-context”导入{ThemeProvider}；导入{ 黑暗主题，默认主题， ThemeProvider 作为 NavigationThemeProvider，来自“@react-navigation/native”； <主题提供者> <入职提供者> <广告提供商> <导航主题提供者值={colorScheme ===“暗”？黑暗主题：默认主题} > <堆栈/> ； ### 所需的库（始终安装）使用 `npx expo install` 安装库（不是 npm/yarn/bun install）： npx expo安装react-native-purchasesreact-native-google-mobile-adsexpo-notificationsi18nextreact-i18nextexpo-localizationreact-native-reanimatedexpo-videoexpo-audioexpo-sqliteexpo-线性梯度图书馆： * `react-native-purchases` (RevenueCat) * `react-native-google-mobile-ads` (AdMob) * `博览会通知` * `i18next` \+ `react-i18next` \+ `expo-localization` * `react-native-reanimated` * `expo-video` \+ `expo-audio` * `expo-sqlite` （用于本地存储） * `expo-linear-gradient` （用于渐变叠加） ### AdMob 配置（app.json 中必需）您必须将其添加到“app.json”中，AdMob 才能正常工作： { “博览会”：{ “插件”：[ [ “反应原生谷歌移动广告”， { "androidAppId": "ca-app-pub-xxxxxxxxxxxxxxxxxx~yyyyyyyyyy", "iosAppId": "ca-app-pub-xxxxxxxxxxxxxxxxxx~yyyyyyyyyy" } ] ] } } 对于开发/测试，请使用测试应用程序 ID： * iOS: `ca-app-pub-3940256099942544~1458002511` * Android: `ca-app-pub-3940256099942544~3347511713` 不要跳过此配置，否则应用程序将因“GADInvalidInitializationException”而崩溃。 ### 横幅广告实施（必需）您必须在选项卡布局中实施横幅广告。使用这个模式：从 'react-native' 导入 { View, StyleSheet }; 从'expo-router/unstable-native-tabs'导入{NativeTabs}；从'react-i18next'导入{useTranslation}；从 'react-native-google-mobile-ads' 导入 { BannerAd, BannerAdSize, TestIds }；从 '@/context/ads-context' 导入 { useAds }；常量 adUnitId = __DEV__ ？测试ID.BANNER : 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy'; 导出默认函数 TabLayout() { const { t } = useTranslation(); const { shouldShowAds } = useAds(); 返回（ <视图样式={styles.container}> <本机选项卡> {t('tabs.home')} {t('tabs.settings')} {应该显示广告 && ( <视图样式={styles.adContainer}> <横幅广告单位 ID={adUnitId} 尺寸={BannerAdSize.ANCHORED_ADAPTIVE_BANNER} 请求选项={{ requestNonPersonalizedAdsOnly：true， }} /> )} ）； } const 样式 = StyleSheet.create({ 容器：{ 弹性：1， }, 广告容器：{ 对齐项目：'居中'，填充底部：10， }, }); * 在开发中始终使用 `TestIds.BANNER` * 横幅广告放置在 Tab 布局中的 NativeTabs 下方 * 使用 `useAds` 上下文来检查 `shouldShowAds` （对高级用户隐藏） ### 土耳其本地化（重要）编写“tr.json”时，必须使用正确的土耳其语字符： * ı（小写无点 i）- 不是 i * ï（大写带点 I）- 不是 I * ü、Ü、ö、Ö、ç、Ç、ş、Ş、ğ、Ğ 示例： * ✅“Ayarlar”、“Giriş”、“Çıkış”、“Başla”、“îleri”、“Güncelle” * ❌“Ayarlar”、“Giris”、“Cikis”、“Basla”、“Ileri”、“Guncelle” ### 禁止（切勿使用） * ❌ AsyncStorage - 使用 `expo-sqlite/localStorage/install` 代替 * ❌ lineHeight 样式 - 使用 padding/margin 代替 * ❌ 来自 expo-router 的 `Tabs` - 使用 `NativeTabs` 代替 * ❌ `@react-navigation/bottom-tabs` \- 使用 `NativeTabs` 代替 * ❌ `expo-av` \- 对视频使用 `expo-video`，对音频使用 `expo-audio` * ❌ `expo-ads-admob` \- 使用 `react-native-google-mobile-ads` 代替 * ❌ 任何其他广告库 - 仅使用 `react-native-google-mobile-ads` * ❌ 在回调中重新激活钩子 - 在组件顶层调用 ### 复活使用（重要）切勿在回调、循环或条件内调用 `useAnimatedStyle`、`useSharedValue` 或其他重新激活的钩子。 ❌ 错误： const renderItem = () => { const animatedStyle = useAnimatedStyle(() => ({ opacity: 1 })); // 错误！返回 ; }; ✅ 正确：函数 MyComponent() { const animatedStyle = useAnimatedStyle(() => ({ opacity: 1 })); // 顶层返回 ; } 对于列表，为每个项目创建一个单独的组件：函数 AnimatedItem({ 项目 }) { const animatedStyle = useAnimatedStyle(() => ({ opacity: 1 })); 返回 {item.name}; } // 在平面列表中： renderItem={({ item }) => } ### 创建后清理（总是这样做）创建新的 Expo 项目后，您必须： 1. 如果使用 `(tabs)` 文件夹，请删除 `src/app/index.tsx` 以避免路由冲突： rm src/app/index.tsx 2. 检查并从这些文件中删除 `lineHeight`： * `src/components/themed-text.tsx` （默认带有 lineHeight - 删除它） * 使用 `lineHeight` 的任何其他组件搜索并删除所有出现的“lineHeight”： grep -r“行高”src/ 替换为内边距或边距。 ### 完成代码后（始终运行）当您完成编写/修改代码时，您必须按顺序运行这些命令： npx expo 安装 --fix npx expo 预构建 --clean 1. `install --fix` 修复依赖版本不匹配的问题 2. `prebuild --clean` 重新创建 ios 和 android 文件夹不要跳过这些步骤。 ** ** ## 项目创建当用户要求创建应用程序时，您必须： 1. 首先询问捆绑包 ID（例如，“捆绑包 ID 是什么？示例：com.company.appname”） 2. 使用以下命令在 CURRENT 目录中创建项目： Bunx create-expo -t default@next 应用程序名称 3. 使用包 ID 更新 `app.json`： { “博览会”：{ “ios”：{ "bundleIdentifier": "com.company.appname" }, “安卓”：{ “package”：“com.company.appname” } } } 4. 然后进入项目并开始实现所有必需的屏幕 5. 不要询问项目路径 - 始终使用当前目录 ## 技术栈 * **框架**：Expo、React Native * **导航** ：Expo Router（基于文件的路由）、NativeTabs * **状态管理**：React Context API * **翻译**：i18next、react-i18next * **购买**：RevenueCat (react-native-purchases) * **广告**：Google AdMob (react-native-google-mobile-ads) * **通知**：博览会通知 * **动画**：react-native-reanimated * **存储** ：通过 expo-sqlite polyfill 进行本地存储 > **警告**：请勿使用异步存储！使用 expo-sqlite polyfill 代替。 * 用法示例导入“expo-sqlite/localStorage/install”； globalThis.localStorage.setItem("键", "值"); console.log(globalThis.localStorage.getItem("key")); // '值' > **警告**：切勿使用 `lineHeight`！它会导致 React Native 中的布局问题。请改用内边距或边距。 ## 项目结构项目根/ ├── src/ │ ├── 应用程序/ │ │ ├── _layout.tsx │ │ ├── 索引.tsx │ │ ├── explore.tsx │ │ ├── 设置.tsx │ │ ├── paywall.tsx │ │ └── onboarding.tsx │ ├── 组件/ │ │ ├── ui/ │ │ ├── 主题文本.tsx │ │ └── 主题视图.tsx │ ├── 常量/ │ │ ├── 主题.ts │ │ └── [数据文件].ts │ ├── 语境/ │ │ ├── onboarding-context.tsx │ │ └── ads-context.tsx │ ├── 挂钩/ │ │ ├── use-notifications.ts │ │ └── use-color-scheme.ts │ ├── 库/ │ │ ├── 通知.ts │ │ ├── 购买.ts │ │ ├── ads.ts │ │ └── i18n.ts │ └── 语言环境/ │ ├── tr.json │ └── en.json ├── 资产/ │ └── 图片/ ├── ios/ ├── 安卓/ ├── 应用程序.json ├── eas.json ├── package.json └── tsconfig.json ## 选项卡导航（NativeTabs） Expo Router 使用 NativeTabs 进行本机选项卡导航：从“expo-router/unstable-native-tabs”导入{ NativeTabs }；导出默认函数 TabLayout() { 返回（ <本机选项卡> 主页探索设置）； } ### NativeTabs 属性 * **sf** : SF 符号图标名称 (iOS) * **md** : Material Design 图标名称 (Android) * **name** : 路由文件名 * Tab 顺序遵循触发顺序 ### 常用图标目的| SF符号|材质图标 ---|---|--- 首页 |房子.填充|家探索 |指南针.填充 |探索设置 |齿轮|设置简介 |人.填充 |人搜索 |放大镜|搜索收藏夹 |心.填满|最喜欢的通知 |铃.填充 |通知 ## 开发命令包子安装发髻开始包子ios 安卓包子面包皮绒 npx expo 安装 --fix npx expo 预构建 --clean ## EAS 构建命令 eas build --profile 开发 --platform ios eas build --profile 开发 --platform android eas build --profile 生产 --platform ios eas build --profile 生产 --platform android eas 提交 --platform ios eas 提交--android 平台 ## 重要模块 ### 收入猫 * 文件：`lib/purchases.ts` * 用于高级访问 * 付费墙：`app/paywall.tsx` ### AdMob * 文件：`src/lib/ads.ts` * 高级用户禁用广告 * 开发时必须使用测试ID ### 通知 * 文件：`src/lib/notifications.ts`、`src/hooks/use-notifications.ts` * iOS 需要推送通知权限 ### 入职和付费专区流程（关键） * 文件：`src/app/onboarding.tsx`、`src/app/paywall.tsx` * 带有全屏背景视频的滑动屏幕 * 视频上的渐变叠加 * **重要**：付费专区必须在入职完成后立即出现 // 在 onboarding.tsx 中 - 当用户完成入职时： const handleComplete = async () => { 等待 setOnboardingCompleted(true); router.replace('/付费墙'); // 立即导航到付费专区 }; // 在 paywall.tsx 中 - 购买后或跳过： const 句柄继续 = () => { 路由器.replace('/(tabs)'); // 导航到主应用程序 }; 流程：“入职 → 付费专区 → 主应用程序（选项卡）” ### 付费墙订阅选项（必需）付费墙必须有两个订阅选项： 1. **每周** \- 默认选项 2. **每年** \- 带有“50% OFF”徽章（推荐，应突出显示） // 订阅选项组件示例： const 订阅选项 = [ { id: '每周', 标题： t('paywall.weekly'), 价格：“4.99 美元/周”， selected: selectedPlan === '每周', }, { id: '每年', 标题： t('paywall.yearly'), 价格：“129.99 美元/年”，徽章：“50% 折扣”， selected: selectedPlan === '每年', }, ]; // 年度选项应在视觉上突出显示为最佳价值 * 年度选项应突出显示折扣徽章 * 默认选择可以是每周一次，但视觉上建议每年一次 * 使用 RevenueCat 包标识符来匹配这些选项 ### 设置屏幕选项（必需）设置屏幕必须包括： 1. **语言** \- 更改应用程序语言 2. **主题** \- 浅色/深色/系统 3. **通知** \- 启用/禁用通知 4. **删除广告** \- 导航到付费墙（如果已经是高级则隐藏） 5. **重置入职** \- 重新启动入职流程（用于测试/演示） const { isPremium } = usePurchases(); // 删除广告 - 导航到付费专区 const handleRemoveAds = () => { router.push('/付费墙'); }; // 重置入职 const handleResetOnboarding = async () => { 等待 setOnboardingCompleted(假); router.replace('/onboarding'); }; // 在设置列表中： {!isPremium && ( <设置项标题={t('settings.removeAds')} 图标=“皇冠.填充” onPress={handleRemoveAds} /> )} <设置项 title={t('settings.resetOnboarding')} 图标=“箭头.逆时针” onPress={handleResetOnboarding} /> ## 本地化 * 文件：`lib/i18n.ts` * 语言存储在“locales/”中 * 应用程序在语言更改时重新启动 ## 编码标准 * 使用功能组件 * 严格的打字稿 * 避免硬编码字符串 * 使用padding代替lineHeight * 必要时使用记忆法 ## 上下文提供者 <主题提供者> <入职提供者> <广告提供商> <堆栈/> ## useColorScheme 挂钩文件：`src/hooks/use-color-scheme.ts` 从 '@/context/theme-context' 导入 { useThemeContext }；导出函数 useColorScheme(): 'light' | '黑暗' | '未指定'{ const { isDark } = useThemeContext(); 返回 isDark ? “暗”：“亮”； } ## 重要提示 1. iOS权限在`app.json`中定义 2. Android权限在`app.json`中定义 3. 通过 `newArchEnabled: true` 启用新架构 4. 通过 `experiments.typedRoutes` 启用类型化路由 ## 应用商店和 Play 商店注释 * 需要 iOS ATT 权限 * 恢复购买必须正常工作 * 目标SDK必须是最新的 ## 测试清单 * UI 已在所有语言中进行测试 * 暗/亮模式 * 通知 * 优质流量 * 恢复购买 * 离线支持 * 多种屏幕尺寸 ## 开发后 npx expo 预构建 --clean 包子ios 安卓包子 > 注意：`prebuild --clean` 重新创建 ios 和 android 文件夹。修改本机模块或app.json后运行它。

扎弗技能

包含技能