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.
43 lines
1.2 KiB
43 lines
1.2 KiB
import { Image, Pressable, StyleSheet, View } from 'react-native';
|
|
import { colors } from '../../../src/theme';
|
|
import { Illustration } from './Illustration';
|
|
import type { AssetName } from '../assets';
|
|
|
|
interface Props {
|
|
name?: AssetName;
|
|
/** 拍照 / 相册得到的本地图片 URI；有值时优先于 name 渲染 */
|
|
uri?: string | null;
|
|
size?: number;
|
|
selected?: boolean;
|
|
onPress?: () => void;
|
|
}
|
|
|
|
/** 圆形头像：预设占位图 / 真实图片；选中态加主色描边 */
|
|
export function Avatar({
|
|
name = 'defaultAvatar',
|
|
uri = null,
|
|
size = 64,
|
|
selected = false,
|
|
onPress,
|
|
}: Props) {
|
|
const content = (
|
|
<View
|
|
style={[
|
|
styles.wrap,
|
|
{ width: size, height: size, borderRadius: size / 2, borderColor: selected ? colors.primary : colors.border },
|
|
]}
|
|
>
|
|
{uri ? (
|
|
<Image source={{ uri }} style={{ width: size, height: size }} resizeMode="cover" />
|
|
) : (
|
|
<Illustration name={name} size={size} circle />
|
|
)}
|
|
</View>
|
|
);
|
|
if (onPress) return <Pressable onPress={onPress} hitSlop={6}>{content}</Pressable>;
|
|
return content;
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
wrap: { borderWidth: 2, overflow: 'hidden', backgroundColor: colors.white },
|
|
});
|
|
|