fix(router): 修复 tabbar 更新问题 fix #8175 #8580

NervJS · Nov 15, 2021 · ef4db6e · ef4db6e
1 parent 3c99a74
commit ef4db6e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 15 deletions.
diff --git a/packages/taro-components/src/components/tabbar/tabbar.tsx b/packages/taro-components/src/components/tabbar/tabbar.tsx
@@ -127,9 +127,9 @@ export class Tabbar implements ComponentInterface {
 
   getOriginUrl = (url: string) => {
     const customRoute = this.customRoutes.filter(([, customUrl]) => {
-      const patha = splitUrl(customUrl).path
-      const pathb = splitUrl(url).path
-      return patha === pathb
+      const pathA = splitUrl(customUrl).path
+      const pathB = splitUrl(url).path
+      return pathA === pathB
     })
     return customRoute.length ? customRoute[0][0] : url
   }
@@ -189,22 +189,24 @@ export class Tabbar implements ComponentInterface {
   }
 
   setTabBarBadgeHandler = ({ index, text, errorHandler }: RouterHandler) => {
-    const list = this.list
+    const list = [...this.list]
     if (index in list) {
-      this.list[index].showRedDot = false
-      this.list[index].badgeText = text
+      list[index].showRedDot = false
+      list[index].badgeText = text
     } else {
       errorHandler({
         errMsg: 'setTabBarBadge:fail tabbar item not found'
       })
     }
+
+    this.list = list
   }
 
   removeTabBarBadgeHandler = ({ index, successHandler, errorHandler }: RouterHandler) => {
-    const list = this.list
+    const list = [...this.list]
     if (index in list) {
-      this.list[index].badgeText = null
-      this.list[index].badgeText = null
+      list[index].badgeText = null
+      list[index].badgeText = null
       successHandler({
         errMsg: 'removeTabBarBadge:ok'
       })
@@ -213,10 +215,12 @@ export class Tabbar implements ComponentInterface {
         errMsg: 'removeTabBarBadge:fail tabbar item not found'
       })
     }
+
+    this.list = list
   }
 
   showTabBarRedDotHandler = ({ index, successHandler, errorHandler }: RouterHandler) => {
-    const list = this.list
+    const list = [...this.list]
     if (index in list) {
       list[index].badgeText = null
       list[index].showRedDot = true
@@ -228,10 +232,12 @@ export class Tabbar implements ComponentInterface {
         errMsg: 'showTabBarRedDot:fail tabbar item not found'
       })
     }
+
+    this.list = list
   }
 
   hideTabBarRedDotHandler = ({ index, successHandler, errorHandler }: RouterHandler) => {
-    const list = this.list
+    const list = [...this.list]
     if (index in list) {
       list[index].showRedDot = false
       successHandler({
@@ -242,6 +248,8 @@ export class Tabbar implements ComponentInterface {
         errMsg: 'hideTabBarRedDot:fail tabbar item not found'
       })
     }
+
+    this.list = list
   }
 
   showTabBarHandler = ({ successHandler }) => {

diff --git a/packages/taro-h5/src/api/tabBar/index.js b/packages/taro-h5/src/api/tabBar/index.js
@@ -4,9 +4,9 @@ import { shouldBeObject, getParameterError, isValidColor, successHandler, errorH
 let tabConf
 let App
 
-export function initTabBarApis (_App = {}) {
-  tabConf = _App.state.__tabs
-  App = _App
+export function initTabBarApis (config = {}) {
+  tabConf = config.tabBar
+  App = config
 }
 
 /**

diff --git a/packages/taro-router/src/tabbar.ts b/packages/taro-router/src/tabbar.ts
@@ -1,6 +1,8 @@
 import { AppConfig } from '@tarojs/taro'
 import { history } from './history'
 
+const Taro = require('@tarojs/taro-h5')
+
 export function initTabbar (config: AppConfig) {
   if (config.tabBar == null) {
     return
@@ -13,7 +15,6 @@ export function initTabbar (config: AppConfig) {
   tabbar.conf.homePage = history.location.pathname === '/' ? homePage : history.location.pathname
   const routerConfig = (config as any).router
   tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash'
-  tabbar.conf.custom = !!routerConfig.customRoutes
   if (routerConfig.customRoutes) {
     tabbar.conf.custom = true
     tabbar.conf.customRoutes = routerConfig.customRoutes
@@ -27,4 +28,5 @@ export function initTabbar (config: AppConfig) {
   const container = document.getElementById('container')
   // eslint-disable-next-line no-unused-expressions
   container?.appendChild(tabbar)
+  Taro.initTabBarApis(config)
 }