diff --git a/src/CustomTabBar.tsx b/src/CustomTabBar.tsx index dcb2137..d33d9f0 100644 --- a/src/CustomTabBar.tsx +++ b/src/CustomTabBar.tsx @@ -1,5 +1,7 @@ import React, { useMemo, useState, useCallback, useEffect } from 'react' import Taro, { eventCenter, AppConfig } from '@tarojs/taro' +import history from '@tarojsx/history' + import { uuid } from './utils' type TabBarConfig = AppConfig['tabBar'] @@ -19,12 +21,12 @@ export interface CustomTabBarProps { /** * 切换选中项 * - * **注意**: 只有调用此接口才能更新选中项! + * **注意**: 只有调用此接口才能正确更新选中项! */ switchTabIndex(index: number): void }) => React.ReactElement /** - * `app.config.js` 中的 `tabBar` 字段 + * `app.config.js` 中的 `tabBar` 字段, taro 3.0.0-rc.1 及以上版本可省略. * * @example * ```tsx @@ -32,7 +34,7 @@ export interface CustomTabBarProps { * * ``` */ - appTabBarConfig: TabBarConfig + appTabBarConfig?: TabBarConfig } let taroTabBarAPIPatched = false @@ -70,8 +72,8 @@ let defaultCurrentIndex = -1 * * @since 2.5.0 微信开发者工具调试基础库 >= 2.5.2 */ -export const CustomTabBar: React.FC = props => { - const { children, appTabBarConfig } = props +export const CustomTabBar: React.FC = (props) => { + const { children, appTabBarConfig = ((window as any).__taroAppConfig as Taro.AppConfig)?.tabBar } = props const { custom, list, ...defaultTabBarStyle } = appTabBarConfig @@ -81,15 +83,12 @@ export const CustomTabBar: React.FC = props => { * 根据路由推断 current index. * 当前版本 taro 3.0.0.alpha.9 在程序启动时返回 router, 之后总是返回 null. */ - const routerIndex = useMemo( - () => list.findIndex(item => Taro.Current.router?.path.startsWith(item.pagePath)), - [] - ) + const routerIndex = useMemo(() => list.findIndex((item) => Taro.Current.router?.path.startsWith(item.pagePath)), []) const [current, setCurrent] = useState(~routerIndex ? routerIndex : defaultCurrentIndex) const [tabBarStyle, setTabBarStyle] = useState(defaultTabBarStyle) const [tabBarList, setTabBarList] = useState( - list.map(item => ({ + list.map((item) => ({ ...item, key: uuid(), pagePath: '/' + item.pagePath, @@ -99,9 +98,13 @@ export const CustomTabBar: React.FC = props => { redDot: false, })) ) + + /** + * 更新指定位置的 Tab 配置 + */ const updateTabBarListAt = useCallback( (tabIndex: number, params: Partial) => { - setTabBarList(prev => prev.map((item, index) => (index === tabIndex ? { ...item, ...params } : item))) + setTabBarList((prev) => prev.map((item, index) => (index === tabIndex ? { ...item, ...params } : item))) }, [setTabBarList] ) @@ -124,6 +127,24 @@ export const CustomTabBar: React.FC = props => { [tabBarList] ) + /** + * 监听 history 修正当前 Tab 索引 + * + * @since taro 3.0.0-rc.1 + */ + useEffect( + () => + history.listen((location) => { + const tabBarPagePaths = appTabBarConfig.list.map((item) => '/' + item.pagePath) + const index = tabBarPagePaths.indexOf(location.path) + if (index >= 0 && index < tabBarPagePaths.length) { + defaultCurrentIndex = index + setCurrent(index) + } + }), + [appTabBarConfig] + ) + useEffect(() => { // console.log('CustomTabBar mounted')