feat(auth): 为登录页面添加Liquid Glass效果并更新文案

- 使用expo-glass-effect为返回按钮添加毛玻璃效果
- 添加兼容性处理,在不支持时使用fallback样式
- 更新副标题文案为"健康生活,自律让我更自由"
- 优化返回按钮尺寸和圆角样式
This commit is contained in:
richarjiang
2025-10-15 19:22:38 +08:00
parent d39a32c0d8
commit bef7d645a8

View File

@@ -1,5 +1,6 @@
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import * as AppleAuthentication from 'expo-apple-authentication'; import * as AppleAuthentication from 'expo-apple-authentication';
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
import { LinearGradient } from 'expo-linear-gradient'; import { LinearGradient } from 'expo-linear-gradient';
import { useLocalSearchParams, useRouter } from 'expo-router'; import { useLocalSearchParams, useRouter } from 'expo-router';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -219,9 +220,22 @@ export default function LoginScreen() {
</View> </View>
{/* 自定义头部,与其它页面风格一致 */} {/* 自定义头部,与其它页面风格一致 */}
<View style={styles.header}> <View style={styles.header}>
<TouchableOpacity accessibilityRole="button" onPress={() => router.back()} style={styles.backButton}> {isLiquidGlassAvailable() ? (
<TouchableOpacity accessibilityRole="button" onPress={() => router.back()} activeOpacity={0.7}>
<GlassView
style={styles.backButton}
glassEffectStyle="clear"
tintColor="rgba(255, 255, 255, 0.2)"
isInteractive={true}
>
<Ionicons name="chevron-back" size={24} color={scheme === 'dark' ? '#ECEDEE' : '#192126'} />
</GlassView>
</TouchableOpacity>
) : (
<TouchableOpacity accessibilityRole="button" onPress={() => router.back()} style={[styles.backButton, styles.fallbackBackground]} activeOpacity={0.7}>
<Ionicons name="chevron-back" size={24} color={scheme === 'dark' ? '#ECEDEE' : '#192126'} /> <Ionicons name="chevron-back" size={24} color={scheme === 'dark' ? '#ECEDEE' : '#192126'} />
</TouchableOpacity> </TouchableOpacity>
)}
<Text style={[styles.headerTitle, { color: color.text }]}></Text> <Text style={[styles.headerTitle, { color: color.text }]}></Text>
<View style={{ width: 32 }} /> <View style={{ width: 32 }} />
</View> </View>
@@ -229,7 +243,7 @@ export default function LoginScreen() {
<ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}> <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
<View style={styles.headerWrap}> <View style={styles.headerWrap}>
<ThemedText style={[styles.title, { color: color.text }]}>Out Live</ThemedText> <ThemedText style={[styles.title, { color: color.text }]}>Out Live</ThemedText>
<ThemedText style={[styles.subtitle, { color: color.textMuted }]}>Out Live</ThemedText> <ThemedText style={[styles.subtitle, { color: color.textMuted }]}></ThemedText>
</View> </View>
{/* Apple 登录 */} {/* Apple 登录 */}
@@ -296,7 +310,17 @@ const styles = StyleSheet.create({
paddingTop: 4, paddingTop: 4,
paddingBottom: 8, paddingBottom: 8,
}, },
backButton: { width: 32, height: 32, alignItems: 'center', justifyContent: 'center' }, backButton: {
width: 38,
height: 38,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 38,
overflow: 'hidden',
},
fallbackBackground: {
backgroundColor: 'rgba(255, 255, 255, 0.5)',
},
headerTitle: { fontSize: 18, fontWeight: '700' }, headerTitle: { fontSize: 18, fontWeight: '700' },
headerWrap: { headerWrap: {
marginBottom: 36, marginBottom: 36,