76 行
3.5 KiB
TypeScript
76 行
3.5 KiB
TypeScript
|
import React from 'react'
|
|||
|
|
import { View, Text, StyleSheet, TouchableOpacity, SafeAreaView, Alert, ScrollView } from 'react-native'
|
|||
|
|
import { useNavigation } from '@react-navigation/native'
|
|||
|
|
import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
|
|||
|
|
import { useAuth } from '../../context/AuthContext'
|
|||
|
|
import type { RootStackParams } from '../../navigation/types'
|
|||
|
|
|
|||
|
|
type Nav = NativeStackNavigationProp<RootStackParams>
|
|||
|
|
|
|||
|
|
function Row({ label, value, onPress }: { label: string; value?: string; onPress?(): void }) {
|
|||
|
|
return (
|
|||
|
|
<TouchableOpacity style={styles.row} onPress={onPress} disabled={!onPress} activeOpacity={onPress ? 0.7 : 1}>
|
|||
|
|
<Text style={styles.rowLabel}>{label}</Text>
|
|||
|
|
<View style={styles.rowRight}>
|
|||
|
|
{value !== undefined && <Text style={styles.rowValue} numberOfLines={1}>{value}</Text>}
|
|||
|
|
{onPress && <Text style={styles.arrow}>›</Text>}
|
|||
|
|
</View>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function ProfileScreen() {
|
|||
|
|
const navigation = useNavigation<Nav>()
|
|||
|
|
const { profile, logout } = useAuth()
|
|||
|
|
|
|||
|
|
const confirmLogout = () => {
|
|||
|
|
Alert.alert('退出登录', '确定要退出吗？', [
|
|||
|
|
{ text: '取消', style: 'cancel' },
|
|||
|
|
{ text: '退出', style: 'destructive', onPress: () => logout() },
|
|||
|
|
])
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const genderLabel = (g?: string) => ({ MALE: '男', FEMALE: '女', UNKNOWN: '未设置' }[g ?? 'UNKNOWN'] ?? '未设置')
|
|||
|
|
const letter = (profile?.nickname || profile?.userId || '?').charAt(0).toUpperCase()
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<SafeAreaView style={styles.root}>
|
|||
|
|
<ScrollView>
|
|||
|
|
<View style={styles.avatarSection}>
|
|||
|
|
<View style={styles.avatarCircle}><Text style={styles.avatarText}>{letter}</Text></View>
|
|||
|
|
<Text style={styles.nickname}>{profile?.nickname ?? '-'}</Text>
|
|||
|
|
<Text style={styles.userId}>@{profile?.userId ?? '-'}</Text>
|
|||
|
|
</View>
|
|||
|
|
|
|||
|
|
<View style={styles.section}>
|
|||
|
|
<Row label="昵称" value={profile?.nickname} onPress={() => navigation.navigate('EditProfile')} />
|
|||
|
|
<View style={styles.sep} />
|
|||
|
|
<Row label="性别" value={genderLabel(profile?.gender)} onPress={() => navigation.navigate('EditProfile')} />
|
|||
|
|
</View>
|
|||
|
|
|
|||
|
|
<TouchableOpacity style={styles.logoutBtn} onPress={confirmLogout}>
|
|||
|
|
<Text style={styles.logoutText}>退出登录</Text>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
</ScrollView>
|
|||
|
|
</SafeAreaView>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const styles = StyleSheet.create({
|
|||
|
|
root: { flex: 1, backgroundColor: '#f5f5f5' },
|
|||
|
|
avatarSection: { alignItems: 'center', paddingTop: 40, paddingBottom: 24, backgroundColor: '#fff', marginBottom: 16 },
|
|||
|
|
avatarCircle: { width: 80, height: 80, borderRadius: 40, backgroundColor: '#07C160', alignItems: 'center', justifyContent: 'center', marginBottom: 12 },
|
|||
|
|
avatarText: { color: '#fff', fontSize: 32, fontWeight: '700' },
|
|||
|
|
nickname: { fontSize: 20, fontWeight: '700', color: '#111', marginBottom: 4 },
|
|||
|
|
userId: { fontSize: 13, color: '#888' },
|
|||
|
|
section: { backgroundColor: '#fff', marginBottom: 16 },
|
|||
|
|
row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 16 },
|
|||
|
|
rowLabel: { fontSize: 16, color: '#333' },
|
|||
|
|
rowRight: { flexDirection: 'row', alignItems: 'center', gap: 8 },
|
|||
|
|
rowValue: { fontSize: 15, color: '#888', maxWidth: 160 },
|
|||
|
|
arrow: { color: '#ccc', fontSize: 20 },
|
|||
|
|
sep: { height: StyleSheet.hairlineWidth, backgroundColor: '#e0e0e0', marginLeft: 16 },
|
|||
|
|
logoutBtn: { margin: 16, padding: 16, backgroundColor: '#fff', borderRadius: 8, alignItems: 'center' },
|
|||
|
|
logoutText: { color: '#ff3b30', fontSize: 16, fontWeight: '600' },
|
|||
|
|
})
|
