底部导航

CLAUDE.md

@@ -127,3 +127,29 @@ This project uses `@antmjs/vantui` v3.7. The official docs: https://antmjs.githu
 - Use `@tarojs/components` for: `View`, `Text`, `ScrollView`, `Image` (native, simpler)
 - Use `@antmjs/vantui` for: styled UI components (Search, Swiper, Tabs, Grid, Button, etc.)
 - VantUI component props extend Taro's `ViewProps`, so `onClick`/`onTap` and style props are always available
+
+## Custom TabBar (`src/custom-tab-bar/`)
+
+This project uses Taro's **custom tabBar** mechanism (`tabBar.custom: true` in `app.config.ts`). Key rules:
+
+### Component location
+- The custom tabBar component MUST be at `src/custom-tab-bar/index.tsx` — this is a Taro convention, not configurable
+- Taro automatically renders this component on every tab page; do NOT import `<CustomTabBar />` in individual pages
+
+### Do NOT use CoverView
+- `CoverView` / `CoverImage` have known bugs on real devices: invisible, click events don't bubble
+- Use regular `<View>` with `position: fixed; bottom: 0; z-index: 999` instead
+
+### Active tab state
+- Taro creates a **new instance** of the tabBar component on each page, so `useState` resets on every tab switch
+- Derive the active tab from `Taro.getCurrentPages()` at render time — NOT from component state
+- Pattern: `const route = Taro.getCurrentPages()[last]?.route; const activeKey = TAB_LIST.find(t => route.includes(t.key))`
+
+### Tab switching
+- Use `Taro.switchTab({ url: pagePath })` — this matches native tabBar behavior
+- The `pagePath` format must match the `tabBar.list[].pagePath` in `app.config.ts`
+
+### Center "publish" button
+- The publish button is a UI-only element not in `tabBar.list`
+- It triggers a VantUI `<Popup>` rendered as a sibling of the tabBar, NOT nested inside it
+- The popup state can use `useState` since it's ephemeral and not shared across tabs