@tarojsx/ui/dist/CustomTabBar.d.ts

We reinvents the UI for Taro3+

import React from 'react';
import { AppConfig } from '@tarojs/taro';
declare type TabBarConfig = AppConfig['tabBar'];
declare type TabBarItemConfig = TabBarConfig['list'][number];
declare type CustomTabBarItem = TabBarItemConfig & {
    key: string;
    badge: string;
    redDot: boolean;
};
declare type CustomTabBarStyle = Pick<TabBarConfig, 'position' | 'color' | 'selectedColor' | 'borderStyle' | 'backgroundColor'>;
export interface CustomTabBarProps {
    children?: (renderProps: {
        /** 是否隐藏. 当调用 `Taro.hideTabBar()` 后值为 true */
        hidden: boolean;
        /** 当前选中项索引 */
        current: number;
        /** TabBar 样式 */
        style: CustomTabBarStyle;
        /** Tab 列表 */
        list: CustomTabBarItem[];
        /**
         * 切换选中项
         *
         * **注意**: 只有调用此接口才能正确更新选中项!
         */
        switchTabIndex(index: number): void;
    }) => React.ReactElement;
    /**
     * `app.config.js` 中的 `tabBar` 字段, taro 3.0.0-rc.1 及以上版本可省略.
     *
     * @example
     * ```tsx
     *  import appConfig from '../app.config'
     *  <CustomTabBar appTabBarConfig={appConfig.tabBar} />
     * ```
     */
    appTabBarConfig?: TabBarConfig;
}
/**
 * 自定义 TabBar Render Props 组件, 提供用于渲染自定义 TabBar 所需的属性.
 *
 * 支持 API:
 * * `Taro.hideTabBar()`
 * * `Taro.showTabBar()`
 *
 * @since 2.5.0 微信开发者工具调试基础库 >= 2.5.2
 */
export declare const CustomTabBar: React.FC<CustomTabBarProps>;
export {};