feat(auth): 为登录页面添加Liquid Glass效果并更新文案
- 使用expo-glass-effect为返回按钮添加毛玻璃效果 - 添加兼容性处理,在不支持时使用fallback样式 - 更新副标题文案为"健康生活,自律让我更自由" - 优化返回按钮尺寸和圆角样式
This commit is contained in:
@@ -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() ? (
|
||||||
<Ionicons name="chevron-back" size={24} color={scheme === 'dark' ? '#ECEDEE' : '#192126'} />
|
<TouchableOpacity accessibilityRole="button" onPress={() => router.back()} activeOpacity={0.7}>
|
||||||
</TouchableOpacity>
|
<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'} />
|
||||||
|
</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,
|
||||||
|
|||||||
Reference in New Issue
Block a user