32 lines
956 B
TypeScript
32 lines
956 B
TypeScript
import type { ReactNode } from 'react';
|
|
import { View, Text } from '@tarojs/components';
|
|
import { navBarStyle, tabNavContentStyle, useNavBarMetrics } from '../lib/nav-bar';
|
|
|
|
type TabMainHeaderProps = {
|
|
title: string;
|
|
extra?: ReactNode;
|
|
};
|
|
|
|
/**
|
|
* Tab 页顶栏：仅在有右侧扩展内容时渲染。
|
|
* 小程序 / H5 标题走系统导航栏，避免自定义顶栏造成顶部留白。
|
|
*/
|
|
export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
|
|
const metrics = useNavBarMetrics();
|
|
|
|
if (!extra) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<View className="tab-main-header" style={navBarStyle(metrics)} aria-label={title}>
|
|
{process.env.TARO_ENV !== 'h5' ? (
|
|
<Text className="tab-main-header__title">{title}</Text>
|
|
) : null}
|
|
<View className="tab-main-header__content" style={tabNavContentStyle(metrics)}>
|
|
<View className="tab-main-header__extra">{extra}</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|