33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
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;
|
|
};
|
|
|
|
const isH5 = process.env.TARO_ENV === 'h5';
|
|
|
|
/** Tab 页顶栏：适配刘海屏 + 微信胶囊避让；H5 不展示标题（与微信系统标题重复） */
|
|
export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
|
|
const metrics = useNavBarMetrics();
|
|
|
|
// H5：系统标题已展示；无右侧内容时整栏不渲染，避免顶部留白
|
|
if (isH5 && !extra) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<View className="tab-main-header" style={navBarStyle(metrics)} aria-label={title}>
|
|
{!isH5 ? <Text className="tab-main-header__title">{title}</Text> : null}
|
|
<View
|
|
className="tab-main-header__content"
|
|
style={tabNavContentStyle(metrics)}
|
|
>
|
|
{extra ? <View className="tab-main-header__extra">{extra}</View> : null}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|