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.
37 lines
1.4 KiB
37 lines
1.4 KiB
import { Image, ImageSourcePropType, StyleSheet, Text, View } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import type { ComponentProps } from 'react';
|
|
import { colors } from '../../../src/theme';
|
|
import { ASSET_REGISTRY, AssetName } from '../assets';
|
|
|
|
type IconName = ComponentProps<typeof Ionicons>['name'];
|
|
|
|
interface Props {
|
|
name: AssetName;
|
|
size?: number;
|
|
radius?: number;
|
|
circle?: boolean;
|
|
}
|
|
|
|
/** 统一插画/Logo/头像占位：有真实图渲染图，否则渲染色块 + 图标 + 提示文字 */
|
|
export function Illustration({ name, size = 120, radius = 16, circle = false }: Props) {
|
|
const def = ASSET_REGISTRY[name];
|
|
const source: ImageSourcePropType | null = def.source;
|
|
const r = circle ? size / 2 : radius;
|
|
|
|
if (source) {
|
|
return <Image source={source} style={{ width: size, height: size, borderRadius: r }} resizeMode="cover" />;
|
|
}
|
|
|
|
return (
|
|
<View style={[styles.block, { width: size, height: size, borderRadius: r, backgroundColor: def.tint }]}>
|
|
<Ionicons name={def.icon as IconName} size={size * 0.32} color={colors.primary} />
|
|
{!circle && <Text style={styles.hint}>{def.hint}</Text>}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
block: { alignItems: 'center', justifyContent: 'center', gap: 6, overflow: 'hidden' },
|
|
hint: { fontSize: 11, color: colors.textHint, paddingHorizontal: 8, textAlign: 'center' },
|
|
});
|
|
|