You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.7 KiB
77 lines
2.7 KiB
import { useState } from 'react';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { colors } from '../../../src/theme';
|
|
import { useOnboarding } from '../../../src/hooks';
|
|
import { ScreenShell } from '../ui/ScreenShell';
|
|
import { Avatar } from '../ui/Avatar';
|
|
import { PrimaryButton } from '../ui/PrimaryButton';
|
|
|
|
const PRESETS = [0, 1, 2, 3, 4];
|
|
|
|
export function P21Avatar() {
|
|
const { setData, navigate, back, meta } = useOnboarding();
|
|
const [mode, setMode] = useState<'none' | 'camera' | 'album' | 'preset'>('none');
|
|
const [picked, setPicked] = useState(-1);
|
|
|
|
const chooseCamera = () => {
|
|
setMode('camera');
|
|
setData({ avatar: 'avatarDesigner' });
|
|
};
|
|
const chooseAlbum = () => {
|
|
setMode('album');
|
|
setData({ avatar: 'avatarDesigner' });
|
|
};
|
|
const choosePreset = (i: number) => {
|
|
setMode('preset');
|
|
setPicked(i);
|
|
setData({ avatar: 'defaultAvatar' });
|
|
};
|
|
|
|
const previewName = mode === 'camera' || mode === 'album' ? 'avatarDesigner' : 'defaultAvatar';
|
|
|
|
return (
|
|
<ScreenShell time={meta.time} battery={meta.battery} title="头像设置" showBack onBack={back}>
|
|
<View style={styles.previewWrap}>
|
|
<Avatar name={previewName} size={110} selected={mode !== 'none'} />
|
|
</View>
|
|
|
|
<View style={styles.actions}>
|
|
<Pressable style={styles.actionBtn} onPress={chooseCamera}>
|
|
<Ionicons name="camera" size={22} color={colors.primary} />
|
|
<Text style={styles.actionText}>拍照上传</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.actionBtn} onPress={chooseAlbum}>
|
|
<Ionicons name="images" size={22} color={colors.primary} />
|
|
<Text style={styles.actionText}>从相册选择</Text>
|
|
</Pressable>
|
|
</View>
|
|
|
|
<Text style={styles.subTitle}>系统默认头像</Text>
|
|
<View style={styles.presets}>
|
|
{PRESETS.map((i) => (
|
|
<Avatar
|
|
key={i}
|
|
size={56}
|
|
selected={mode === 'preset' && picked === i}
|
|
onPress={() => choosePreset(i)}
|
|
/>
|
|
))}
|
|
</View>
|
|
|
|
<View style={styles.footer}>
|
|
<PrimaryButton label="下一步" active={mode !== 'none'} onPress={() => navigate('P22')} />
|
|
</View>
|
|
</ScreenShell>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
previewWrap: { alignItems: 'center', marginVertical: 24 },
|
|
actions: { flexDirection: 'row', justifyContent: 'center', gap: 28, marginBottom: 28 },
|
|
actionBtn: { alignItems: 'center', gap: 6 },
|
|
actionText: { fontSize: 12, color: colors.textSecondary },
|
|
subTitle: { fontSize: 14, fontWeight: '700', color: colors.textPrimary, marginBottom: 14 },
|
|
presets: { flexDirection: 'row', justifyContent: 'space-between', gap: 10 },
|
|
footer: { marginTop: 32 },
|
|
});
|
|
|