55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import { View, Text } from '@tarojs/components'
|
||
import Taro from '@tarojs/taro'
|
||
import { useMemo } from 'react'
|
||
import styles from './index.module.scss'
|
||
|
||
interface Props {
|
||
title: string
|
||
fixed?: boolean
|
||
autoBack?: boolean // 默认 true（修复 uni-app up-navbar 坑）
|
||
border?: boolean // 默认 false
|
||
safeAreaTop?: boolean // 默认 true
|
||
variant?: 'default' | 'hero' // hero 为绿色渐变头部，default 为白底黑字
|
||
onBack?: () => void
|
||
}
|
||
|
||
export function Navbar({
|
||
title,
|
||
fixed = false,
|
||
autoBack = true,
|
||
border = false,
|
||
safeAreaTop = true,
|
||
variant = 'default',
|
||
onBack
|
||
}: Props) {
|
||
// getSystemInfoSync 已废弃，改用 getWindowInfo
|
||
const statusBarHeight = useMemo(() => Taro.getWindowInfo().statusBarHeight ?? 20, [])
|
||
|
||
const handleBack = () => {
|
||
if (onBack) onBack()
|
||
else Taro.navigateBack()
|
||
}
|
||
|
||
return (
|
||
<View
|
||
className={`${styles.navbar} ${variant === 'hero' ? styles.navbarHero : ''}`}
|
||
style={{
|
||
paddingTop: safeAreaTop ? `${statusBarHeight}px` : 0,
|
||
position: fixed ? 'fixed' : 'relative',
|
||
borderBottom: border ? '1px solid #f0f1f3' : 'none'
|
||
}}
|
||
>
|
||
<View className={styles.bar}>
|
||
{autoBack && (
|
||
<View className={styles.back} onClick={handleBack}>
|
||
<View className={styles.backArrow} />
|
||
</View>
|
||
)}
|
||
<View className={styles.titleWrap}>
|
||
<Text className={`${styles.title} ${variant === 'hero' ? styles.titleHero : ''}`}>{title}</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|