底部导航

src/components/PublishPopup/index.tsx

@@ -26,12 +26,11 @@ interface PublishPopupProps {
 export default function PublishPopup({ visible, onClose, onSelect }: PublishPopupProps) {
   return (
     <Popup
-      visible={visible}
+      show={visible}
       position='bottom'
       round
       onClose={onClose}
       closeable
-      customStyle={{ background: 'transparent' }}
     >
       <View className='publish-popup'>
         <View className='popup-header'>

src/custom-tab-bar/index.tsx

@@ -20,24 +20,13 @@ const TAB_LIST: TabItem[] = [
   { key: 'profile',  label: '我的',     icon: '👤', pagePath: '/pages/profile/index' },
 ]
 
-/**
- * 根据当前页面路由推导激活的 tab。
- * 不使用 useState —— Taro 在每次切换 tab 时都会重建 custom-tab-bar 实例，
- * 因此直接从 getCurrentPages() 实时计算即可保证正确性。
- */
-function useActiveKey(): string {
-  const pages = Taro.getCurrentPages()
-  if (pages.length > 0) {
-    const route = pages[pages.length - 1].route || ''
-    for (const tab of TAB_LIST) {
-      if (route.includes(tab.key)) return tab.key
-    }
-  }
-  return 'index'
+interface CustomTabBarProps {
+  /** 当前激活的 tab key，由页面传入 */
+  activeKey: string
 }
 
 /** 获取底部安全距离 */
-function useSafeBottom(): number {
+function getSafeBottom(): number {
   try {
     const info = Taro.getSystemInfoSync()
     if (info.safeArea) {
@@ -47,9 +36,8 @@ function useSafeBottom(): number {
   return 0
 }
 
-export default function CustomTabBar() {
-  const activeKey = useActiveKey()
-  const safeBottom = useSafeBottom()
+export default function CustomTabBar({ activeKey }: CustomTabBarProps) {
+  const safeBottom = getSafeBottom()
   const [publishVisible, setPublishVisible] = useState(false)
 
   /** 切换 Tab —— 使用 Taro.switchTab 与原生 tabBar 行为一致 */

src/pages/index/index.tsx

@@ -165,7 +165,7 @@ export default function Index() {
         <View className='bottom-safe' />
       </ScrollView>
 
-      <CustomTabBar />
+      <CustomTabBar activeKey='index' />
     </View>
   )
 }

src/pages/messages/index.tsx

@@ -10,7 +10,7 @@ export default function Messages() {
         <Text className='placeholder-text'>消息</Text>
         <Text className='placeholder-desc'>即将上线，敬请期待</Text>
       </View>
-      <CustomTabBar />
+      <CustomTabBar activeKey='messages' />
     </View>
   )
 }

src/pages/profile/index.tsx

@@ -10,7 +10,7 @@ export default function Profile() {
         <Text className='placeholder-text'>我的</Text>
         <Text className='placeholder-desc'>即将上线，敬请期待</Text>
       </View>
-      <CustomTabBar />
+      <CustomTabBar activeKey='profile' />
     </View>
   )
 }

src/pages/tasks/index.tsx

@@ -10,7 +10,7 @@ export default function Tasks() {
         <Text className='placeholder-text'>校园任务</Text>
         <Text className='placeholder-desc'>即将上线，敬请期待</Text>
       </View>
-      <CustomTabBar />
+      <CustomTabBar activeKey='tasks' />
     </View>
   )
 }