b6583e07c8
- Updated Text component to support dynamic font weights, allowing for more flexible text styling. - Refactored variant styles to utilize new font weight constants for better consistency across text variants. - Introduced letter spacing adjustments for improved readability and visual appeal. - Added font family configuration for iOS and Android to optimize typography across platforms.
107 lines
2.3 KiB
TypeScript
107 lines
2.3 KiB
TypeScript
/**
|
|
* Text 文本组件
|
|
* 提供统一的文本样式
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { Text as RNText, TextProps, StyleSheet, TextStyle, ViewStyle, Platform } from 'react-native';
|
|
import { useAppColors, fontSizes, fontWeights } from '../../theme';
|
|
|
|
type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
|
|
|
|
interface CustomTextProps extends Omit<TextProps, 'style'> {
|
|
children: React.ReactNode;
|
|
variant?: TextVariant;
|
|
color?: string;
|
|
numberOfLines?: number;
|
|
onPress?: () => void;
|
|
style?: TextStyle | TextStyle[];
|
|
weight?: 'regular' | 'medium' | 'semibold' | 'bold';
|
|
}
|
|
|
|
const variantStyles: Record<TextVariant, object> = {
|
|
h1: {
|
|
fontSize: fontSizes['4xl'],
|
|
fontWeight: fontWeights.bold,
|
|
lineHeight: fontSizes['4xl'] * 1.3,
|
|
letterSpacing: -0.5,
|
|
},
|
|
h2: {
|
|
fontSize: fontSizes['3xl'],
|
|
fontWeight: fontWeights.semibold,
|
|
lineHeight: fontSizes['3xl'] * 1.3,
|
|
letterSpacing: -0.3,
|
|
},
|
|
h3: {
|
|
fontSize: fontSizes['2xl'],
|
|
fontWeight: fontWeights.semibold,
|
|
lineHeight: fontSizes['2xl'] * 1.3,
|
|
letterSpacing: -0.2,
|
|
},
|
|
body: {
|
|
fontSize: fontSizes.md,
|
|
fontWeight: fontWeights.regular,
|
|
lineHeight: fontSizes.md * 1.6,
|
|
letterSpacing: 0.1,
|
|
},
|
|
caption: {
|
|
fontSize: fontSizes.sm,
|
|
fontWeight: fontWeights.regular,
|
|
lineHeight: fontSizes.sm * 1.5,
|
|
letterSpacing: 0.2,
|
|
},
|
|
label: {
|
|
fontSize: fontSizes.xs,
|
|
fontWeight: fontWeights.medium,
|
|
lineHeight: fontSizes.xs * 1.4,
|
|
letterSpacing: 0.3,
|
|
},
|
|
};
|
|
|
|
const Text: React.FC<CustomTextProps> = ({
|
|
children,
|
|
variant = 'body',
|
|
color,
|
|
weight,
|
|
numberOfLines,
|
|
onPress,
|
|
style,
|
|
...props
|
|
}) => {
|
|
const colors = useAppColors();
|
|
const textStyle = [
|
|
styles.base,
|
|
variantStyles[variant],
|
|
weight ? { fontWeight: fontWeights[weight] } : null,
|
|
color ? { color } : { color: colors.text.primary },
|
|
style,
|
|
];
|
|
|
|
if (onPress) {
|
|
return (
|
|
<RNText
|
|
style={textStyle}
|
|
numberOfLines={numberOfLines}
|
|
onPress={onPress}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</RNText>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<RNText style={textStyle} numberOfLines={numberOfLines} {...props}>
|
|
{children}
|
|
</RNText>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
base: {
|
|
fontFamily: undefined, // 使用系统默认字体
|
|
},
|
|
});
|
|
|
|
export default Text;
|