feat(ui): 实现原生标签页与玻璃效果按钮组件
引入 NativeTabs 替代默认 Tabs 以支持原生标签栏样式,并添加 GlassButton 组件实现毛玻璃效果按钮。 移除对 useBottomTabBarHeight 的依赖,统一使用固定底部间距 60。 重构头像上传逻辑,使用新的 uploadImage API 替代 COS 直传方案。 更新 expo-router 至 ~6.0.1 版本以支持不稳定特性。
This commit is contained in:
66
components/glass/button.tsx
Normal file
66
components/glass/button.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
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',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user