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.
41 lines
1.5 KiB
41 lines
1.5 KiB
import { Image, ImageSourcePropType, StyleSheet, 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/头像占位：有真实图渲染图，否则渲染色块 + 图标。
|
|
*
|
|
* 占位期**不渲染 `hint`**：那些文字是给设计/开发看的素材说明
|
|
* （「手持 OFFER 职场男性插画」），直接画在用户界面上等于把开发备注当内容展示。
|
|
* 说明仍留在 `assets.ts`，供换图时对照。
|
|
*/
|
|
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} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
block: { alignItems: 'center', justifyContent: 'center', gap: 6, overflow: 'hidden' },
|
|
});
|
|
|