81 行
3.1 KiB
TypeScript
81 行
3.1 KiB
TypeScript
|
import React, { useState } from 'react'
|
||
|
|
import {
|
||
|
|
View, Text, TextInput, StyleSheet, TouchableOpacity, SafeAreaView,
|
||
|
|
ActivityIndicator, Alert, ScrollView,
|
||
|
|
} from 'react-native'
|
||
|
|
import { useAuth } from '../../context/AuthContext'
|
||
|
|
import { useNavigation } from '@react-navigation/native'
|
||
|
|
|
||
|
|
type Gender = 'UNKNOWN' | 'MALE' | 'FEMALE'
|
||
|
|
|
||
|
|
export default function EditProfileScreen() {
|
||
|
|
const navigation = useNavigation()
|
||
|
|
const { profile, updateProfile } = useAuth()
|
||
|
|
const [nickname, setNickname] = useState(profile?.nickname ?? '')
|
||
|
|
const [gender, setGender] = useState<Gender>(profile?.gender ?? 'UNKNOWN')
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
|
||
|
|
const save = async () => {
|
||
|
|
const nick = nickname.trim()
|
||
|
|
if (!nick) { Alert.alert('提示', '昵称不能为空'); return }
|
||
|
|
setLoading(true)
|
||
|
|
try {
|
||
|
|
await updateProfile({ nickname: nick, gender })
|
||
|
|
navigation.goBack()
|
||
|
|
} catch (e: any) {
|
||
|
|
Alert.alert('失败', e?.message ?? '保存失败，请重试')
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<SafeAreaView style={styles.root}>
|
||
|
|
<ScrollView contentContainerStyle={styles.inner}>
|
||
|
|
<Text style={styles.label}>昵称</Text>
|
||
|
|
<TextInput
|
||
|
|
style={styles.input}
|
||
|
|
value={nickname}
|
||
|
|
onChangeText={setNickname}
|
||
|
|
placeholder="请输入昵称"
|
||
|
|
maxLength={32}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Text style={styles.label}>性别</Text>
|
||
|
|
<View style={styles.genderRow}>
|
||
|
|
{(['MALE', 'FEMALE', 'UNKNOWN'] as Gender[]).map(g => {
|
||
|
|
const label = { MALE: '男', FEMALE: '女', UNKNOWN: '不设置' }[g]
|
||
|
|
return (
|
||
|
|
<TouchableOpacity
|
||
|
|
key={g}
|
||
|
|
style={[styles.genderBtn, gender === g && styles.genderBtnActive]}
|
||
|
|
onPress={() => setGender(g)}
|
||
|
|
>
|
||
|
|
<Text style={[styles.genderBtnText, gender === g && styles.genderBtnTextActive]}>{label}</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<TouchableOpacity style={styles.saveBtn} onPress={save} disabled={loading}>
|
||
|
|
{loading ? <ActivityIndicator color="#fff" /> : <Text style={styles.saveBtnText}>保存</Text>}
|
||
|
|
</TouchableOpacity>
|
||
|
|
</ScrollView>
|
||
|
|
</SafeAreaView>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
root: { flex: 1, backgroundColor: '#f5f5f5' },
|
||
|
|
inner: { padding: 20 },
|
||
|
|
label: { fontSize: 13, color: '#888', marginBottom: 8, marginTop: 16 },
|
||
|
|
input: { backgroundColor: '#fff', borderWidth: 1, borderColor: '#e0e0e0', borderRadius: 8, padding: 12, fontSize: 16 },
|
||
|
|
genderRow: { flexDirection: 'row', gap: 12 },
|
||
|
|
genderBtn: { flex: 1, padding: 12, borderRadius: 8, borderWidth: 1, borderColor: '#e0e0e0', backgroundColor: '#fff', alignItems: 'center' },
|
||
|
|
genderBtnActive: { borderColor: '#07C160', backgroundColor: '#e8f9f0' },
|
||
|
|
genderBtnText: { fontSize: 15, color: '#555' },
|
||
|
|
genderBtnTextActive: { color: '#07C160', fontWeight: '600' },
|
||
|
|
saveBtn: { marginTop: 32, backgroundColor: '#07C160', borderRadius: 8, padding: 14, alignItems: 'center' },
|
||
|
|
saveBtnText: { color: '#fff', fontSize: 16, fontWeight: '600' },
|
||
|
|
})
|
