1b76cc305a
引入 NativeTabs 替代默认 Tabs 以支持原生标签栏样式，并添加 GlassButton 组件实现毛玻璃效果按钮。 移除对 useBottomTabBarHeight 的依赖，统一使用固定底部间距 60。 重构头像上传逻辑，使用新的 uploadImage API 替代 COS 直传方案。 更新 expo-router 至 ~6.0.1 版本以支持不稳定特性。
67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
|
|
import React from 'react';
|
|
import { GestureResponderEvent, StyleSheet, Text, TouchableOpacity } from 'react-native';
|
|
|
|
interface GlassButtonProps {
|
|
title: string;
|
|
onPress: (event: GestureResponderEvent) => void;
|
|
style?: object;
|
|
glassStyle?: 'regular' | 'clear';
|
|
tintColor?: string;
|
|
}
|
|
|
|
export default function GlassButton({
|
|
title,
|
|
onPress,
|
|
style = {},
|
|
glassStyle = 'regular',
|
|
tintColor = 'rgba(255, 255, 255, 0.3)',
|
|
}: GlassButtonProps) {
|
|
const available = isLiquidGlassAvailable();
|
|
|
|
if (available) {
|
|
return (
|
|
<TouchableOpacity onPress={onPress} activeOpacity={0.7}>
|
|
<GlassView
|
|
style={[styles.button, style]}
|
|
glassEffectStyle={glassStyle}
|
|
tintColor={tintColor}
|
|
isInteractive={true} // 如果需要点击反馈
|
|
>
|
|
<Text style={styles.buttonText}>{title}</Text>
|
|
</GlassView>
|
|
</TouchableOpacity>
|
|
);
|
|
} else {
|
|
// fallback
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
style={[styles.button, style, styles.fallbackBackground]}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.buttonText}>{title}</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 24,
|
|
borderRadius: 12,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
overflow: 'hidden', // 保证玻璃边界圆角效果
|
|
},
|
|
fallbackBackground: {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
|
},
|
|
buttonText: {
|
|
fontSize: 16,
|
|
color: '#000',
|
|
fontWeight: '600',
|
|
},
|
|
});
|