143 lines
3.3 KiB
TypeScript
143 lines
3.3 KiB
TypeScript
import React from 'react'
|
|
import { ViewStyle, Pressable, StyleSheet, View, Text, Platform } from 'react-native'
|
|
import { Image } from 'expo-image'
|
|
import { BlurView } from 'expo-blur'
|
|
import { RightArrowIcon } from '@/components/icon'
|
|
export interface NotificationProps {
|
|
/**
|
|
* 未读数量
|
|
*/
|
|
count?: number
|
|
/**
|
|
* 是否显示通知
|
|
*/
|
|
visible?: boolean
|
|
/**
|
|
* 点击事件
|
|
*/
|
|
onPress?: () => void
|
|
/**
|
|
* 自定义样式
|
|
*/
|
|
style?: ViewStyle
|
|
/**
|
|
* 最大显示数量，超过显示 99+
|
|
*/
|
|
maxCount?: number
|
|
/**
|
|
* 通知标题
|
|
*/
|
|
title?: string
|
|
/**
|
|
* 通知内容
|
|
*/
|
|
message?: string
|
|
}
|
|
|
|
/**
|
|
* 通知组件
|
|
* 基于 Figma 设计实现的通知横幅组件
|
|
* 尺寸: 359x60
|
|
*/
|
|
const Notification: React.FC<NotificationProps> = ({
|
|
count = 0,
|
|
visible = true,
|
|
onPress,
|
|
style,
|
|
title,
|
|
message,
|
|
}) => {
|
|
const shouldShow = visible && count > 0
|
|
|
|
if (!shouldShow) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={onPress}
|
|
style={[styles.container, style]}
|
|
disabled={!onPress}
|
|
>
|
|
<BlurView
|
|
intensity={Platform.OS === 'ios' ? 50 : 50}
|
|
tint={Platform.OS === 'ios' ? 'dark' : 'default'}
|
|
style={styles.notificationBanner}
|
|
>
|
|
<View style={styles.notificationBannerIcon}>
|
|
<Image
|
|
source={require('@/assets/images/generate.png')}
|
|
style={styles.iconImage}
|
|
contentFit="contain"
|
|
/>
|
|
</View>
|
|
<View style={styles.contentWrapper}>
|
|
{title && (
|
|
<Text style={styles.title}>
|
|
{title}
|
|
</Text>
|
|
)}
|
|
{message && (
|
|
<Text style={styles.message} numberOfLines={1}>
|
|
{message}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
<View style={styles.badgeContainer}>
|
|
<RightArrowIcon/>
|
|
</View>
|
|
</BlurView>
|
|
</Pressable>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
width: '100%',
|
|
},
|
|
notificationBanner: {
|
|
height: 60,
|
|
width: '100%',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
borderRadius: 12,
|
|
backgroundColor: Platform.OS === 'ios' ? '#FFFFFF1A' : '#FFFFFF1A',
|
|
overflow: 'hidden',
|
|
paddingHorizontal: 16,
|
|
},
|
|
notificationBannerIcon: {
|
|
width: 32,
|
|
height: 32,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginRight: 12,
|
|
},
|
|
iconImage: {
|
|
width: 32,
|
|
height: 32,
|
|
},
|
|
contentWrapper: {
|
|
flex: 1,
|
|
},
|
|
title: {
|
|
marginBottom: 2,
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: '#F5F5F5',
|
|
},
|
|
message: {
|
|
fontSize: 12,
|
|
color: '#CCCCCC',
|
|
},
|
|
badgeContainer: {
|
|
marginLeft: 12,
|
|
minWidth: 20,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
})
|
|
|
|
export default Notification
|
|
|