iOS 标签栏（导航页脚）
在 Config.swift 中把 showNavFooter 设为 true，并在 FooterBar.json 中描述三到五个标签：标签文字（name）、SF Symbol 图标（sf_symbol）和点按后打开的 URL（redirection_link），另外用 colour（dark 或 light）设置整个标签栏的配色。
四种原生导航方式
四种方式在点按时都会在主 WebView 中加载您 Web 应用的某个 URL，所以您的路由完全不用改。每个平台选一种主要模式即可。
iOS 侧边栏
把 enableSidebar 设为 true，并在 Sidebar.json 中填写相同的字段。一个悬浮按钮会打开原生滑出菜单，适合版块多到标签栏放不下的情况。它可以单独使用，也可以与页脚标签栏同时使用（侧边栏文档）。
Android 底部导航栏
Config.java 中的 ENABLE_NAVIGATION_FOOTER 会添加一个 Material 3 底部导航栏。其中的条目、图标和文字来自 res/menu/menu_drawer.xml；Google 建议设置三到五个顶级目的地。深色和浅色模式会自动跟随系统。
Android 抽屉式导航
ENABLE_NAVIGATION_DRAWER 会添加一个悬浮菜单按钮，用来打开 Material 抽屉式导航，由同一个菜单文件驱动。底部导航栏和抽屉式导航可以同时使用，例如主要版块放在底部，设置、帮助和法律页面放在抽屉里。
给 Lovable 的提示词
把这段粘贴到 Lovable 中以实现 Web 应用端。检查结果，发布，然后在 WebViewGold 应用中测试。
粘贴到 Lovable 的提示词
这个应用将运行在一个显示自有标签栏的原生应用外壳（WebViewGold）中。在外壳内，navigator.userAgent 包含 "WebViewGold"。 1. 添加一个 hook useIsNativeApp()，当 navigator.userAgent 包含 "WebViewGold" 时返回 true，并在首次渲染前同步求值。 2. 当它为 true 时，不渲染网站页眉、汉堡 Sheet 菜单和页脚链接栏；对浏览器访客则保持不变。 3. 列出这个应用中可以用作标签的四到五个主要路由，并确保每个路由通过 URL 直接加载时都能打开正确的页面。 4. 在受保护路由的包装组件中，重定向到 /auth 之前先保存所请求的路径，并在 Supabase 登录成功后导航回该路径。 5. 在每个详情页顶部添加一个调用 navigate(-1) 的返回箭头，没有历史记录时回退到上级列表。 6. 把隐私政策、服务条款和删除账户的链接移到账户页面，这样没有页脚也能访问到它们。 7. 不要再添加第二个底部导航；原生标签栏会负责这部分。
我很高兴购买了这个应用！非常简单，文档也很棒。联系客服后，他们回复很快且非常友好，一天之内就解决了我的问题。10/10，值得推荐。
原生导航栏、Web 标签栏还是网站菜单？
| 原生导航栏（WebViewGold） | 在 Web 应用中构建的标签栏 | 带汉堡菜单的网站页眉 | |
|---|---|---|---|
| 外观 | 系统原生样式：iOS 上是 SF Symbols，Android 上是 Material 3 | 随您设计，与品牌保持一致 | 一个移动网站 |
| 在哪里修改 | FooterBar.json、Sidebar.json、menu_drawer.xml；随商店更新发布 | 在您的 Web 应用中，每次部署即时生效 | 在您的 Web 应用中 |
| 主屏幕指示条和安全区域 | 原生处理 | 需要用 env(safe-area-inset-bottom) 设置内边距 | 常被主屏幕指示条遮挡 |
| 点按后的效果 | 在 WebView 中加载该标签的 URL（一次页面加载） | 客户端路由切换；即时响应，保留状态 | 先打开菜单，再跳转 |
| 最适合 | 三到五个固定的顶级版块 | 经常变化的版块、角标和计数器 | 仅用于网站；在应用内隐藏 |
为 Lovable 应用添加原生标签栏
两个平台合计约 30 分钟，外加一次重新构建。
选出三到五个目的地
通常是首页、一个主列表或搜索、收件箱或创建操作，以及账户。其他内容都放在这些版块之内。每个目的地都需要在您的 Lovable 应用中有自己的 URL，而且直接加载这个 URL 时就能打开正确的页面，而不是只能通过应用内点击到达。
iOS：编写 FooterBar.json
把
showNavFooter设为 true，并为每个标签添加一个条目，包含name、sf_symbol（例如house、magnifyingglass、tray、person.crop.circle）以及指向您生产域名的完整redirection_link。把colour设置为与您的主题相匹配。参考：iOS 文档。Android：填写 menu_drawer.xml
在 Config.java 中把
ENABLE_NAVIGATION_FOOTER（底部导航栏）或ENABLE_NAVIGATION_DRAWER（侧边抽屉）设为 true，在res/menu/menu_drawer.xml中定义条目、图标和文字，并按照 Android 文档中的说明为每个条目分配 URL。在应用内隐藏 Web 导航
在 Config.swift（
useragent_iphone、useragent_ipad）和 Config.java（USER_AGENT）中设置包含“WebViewGold”之类标记的自定义 User-Agent，然后让您的 Lovable 应用在检测到它时，不再渲染网站页眉菜单、汉堡按钮和页脚链接栏。同一屏幕上出现两套导航系统，是最常见的设计类审核意见。为详情页提供返回按钮
iPhone 没有系统返回按钮。标签负责打开各个版块；从版块进入的页面需要在页眉中显示清晰可见的返回箭头。请保持
enableswipenavigation开启，这样在 iOS 上从屏幕边缘轻扫也能返回；Android 用户还可以使用系统返回手势。在冷启动和未登录状态下测试每个标签
分别在启动后立即、登录后以及会话过期后点按每个标签。如果某个标签重定向到了登录页，用户登录后应回到这个标签，而不是仪表板。
典型应用的 FooterBar.json
把这些 URL 替换为您的 Lovable 应用在生产域名上的路由。Sidebar.json 使用相同的结构。图标名称请在 Apple 的 SF Symbols 应用中核对。
json
{
"colour": "light",
"layout": [
{ "redirection_link": "https://app.yourdomain.com/", "sf_symbol": "house", "name": "首页" },
{ "redirection_link": "https://app.yourdomain.com/search", "sf_symbol": "magnifyingglass", "name": "搜索" },
{ "redirection_link": "https://app.yourdomain.com/inbox", "sf_symbol": "tray", "name": "收件箱" },
{ "redirection_link": "https://app.yourdomain.com/account", "sf_symbol": "person.crop.circle", "name": "账户" }
]
}审核人员会注意到的导航问题
- 原生标签栏加上带有自己菜单的网站页眉：应用看起来像没做完。请在应用内隐藏其中之一。
- 标签指向预览或测试环境地址，或指向直接加载时返回 404 的路由。构建之前，请在新的浏览器标签页中逐一打开每个标签 URL。
- 超过五个标签，或标签打开的是外部网站。标签只留给您自己的顶级版块；法律和帮助页面放到侧边栏或抽屉式导航中。
- 布局仍然依赖网站页脚来放置删除账户或隐私政策等关键链接。请确保这些链接在应用内依然可以访问，例如放在“账户”下。
- 只靠标签栏来应对准则 4.2。它能让应用更有原生感；推送通知、离线页面和像应用一样的布局才能让整体完整（参见准则 4.2 指南）。
常见问题
要通过 App Store 审核，必须有原生标签栏吗？
没有哪一项功能是必需的。准则 4.2 关注应用是否提供了比重新包装的网站更多的东西，准则 4.0 关注它是否遵循 iOS 的设计规范。原生标签栏是这两方面最明确的信号之一，尤其是与推送通知和完善的离线页面搭配时，但它无法替代一个适配移动端的 Web 应用。
不发布商店更新也能修改标签吗？
原生标签栏不行：FooterBar.json、Sidebar.json 和 menu_drawer.xml 都打包在构建版本里。标签 URL 背后的页面则会随每次部署更新。如果您的版块经常变化，请改为在 Web 应用中构建标签栏，并只在应用内显示。
原生标签栏支持单页应用吗？
支持。每个标签都会在 WebView 中加载自己的 URL，因此您的托管服务必须对每个路由都返回应用（SPA 回退到 index.html），您的路由器也必须在直接加载时打开正确的页面。测试方法：把某个标签 URL 粘贴到新的浏览器标签页中打开。
应该用页脚标签栏、侧边栏，还是两者都用？
用页脚标签栏承载三到五个主要版块。再添加 iOS 侧边栏或 Android 抽屉式导航，放置设置、帮助和法律页面等次要目的地。不要在两处重复相同的链接。
Lovable 生成的菜单怎么处理？
在网站上保留它，并通过 User-Agent 检测在应用内跳过它。应用中由原生导航栏接管；页眉里再出现一个菜单图标，会让用户和审核人员感到困惑。
让您的应用上架商店的三种方式
结果相同，只是您需要投入的工作量不同。三种方式都附带审核通过保证和 7×24 小时人工支持。
自己动手
$109 每个平台，一次性付费
WebViewGold 许可证：一个现成的 Xcode 或 Android Studio 项目。粘贴您的 URL，设置名称和图标，开启所需功能，构建并提交。永久免费更新。
在主页查看方案Cloud Builder
$349 每个许可证，一次性附加购买
无需 Mac、Xcode 或 Android Studio：在浏览器中完成配置，我们在云端构建两个应用，并将其交付到 App Store Connect 和 Play Console。
Cloud Builder 如何运作 试用免费演示Full Service
$698 每个平台 $798
把您的 URL 和图标发给我们。我们的团队在 72 小时内完成配置、构建并交付您的应用，白标，附源码项目。两个平台共 $1,158。
Full Service 详情 服务提供方：
冬季特惠价格有效期至 2026年12月31日。