feat(TextComponent): enhance text styling with dynamic font weights and improved layout
Some checks failed
Frontend CI / build-and-push-web (push) Successful in 3m7s
Frontend CI / ota-android (push) Successful in 13m37s
Frontend CI / build-android-apk (push) Failing after 54m7s

- 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.
This commit is contained in:
lafay
2026-03-26 03:58:09 +08:00
parent 6d1514b2d1
commit b6583e07c8
2 changed files with 54 additions and 12 deletions

View File

@@ -4,8 +4,8 @@
*/ */
import React from 'react'; import React from 'react';
import { Text as RNText, TextProps, StyleSheet, TextStyle, ViewStyle } from 'react-native'; import { Text as RNText, TextProps, StyleSheet, TextStyle, ViewStyle, Platform } from 'react-native';
import { useAppColors, fontSizes } from '../../theme'; import { useAppColors, fontSizes, fontWeights } from '../../theme';
type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label'; type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
@@ -16,38 +16,45 @@ interface CustomTextProps extends Omit<TextProps, 'style'> {
numberOfLines?: number; numberOfLines?: number;
onPress?: () => void; onPress?: () => void;
style?: TextStyle | TextStyle[]; style?: TextStyle | TextStyle[];
weight?: 'regular' | 'medium' | 'semibold' | 'bold';
} }
const variantStyles: Record<TextVariant, object> = { const variantStyles: Record<TextVariant, object> = {
h1: { h1: {
fontSize: fontSizes['4xl'], fontSize: fontSizes['4xl'],
fontWeight: '700', fontWeight: fontWeights.bold,
lineHeight: fontSizes['4xl'] * 1.4, lineHeight: fontSizes['4xl'] * 1.3,
letterSpacing: -0.5,
}, },
h2: { h2: {
fontSize: fontSizes['3xl'], fontSize: fontSizes['3xl'],
fontWeight: '600', fontWeight: fontWeights.semibold,
lineHeight: fontSizes['3xl'] * 1.4, lineHeight: fontSizes['3xl'] * 1.3,
letterSpacing: -0.3,
}, },
h3: { h3: {
fontSize: fontSizes['2xl'], fontSize: fontSizes['2xl'],
fontWeight: '600', fontWeight: fontWeights.semibold,
lineHeight: fontSizes['2xl'] * 1.3, lineHeight: fontSizes['2xl'] * 1.3,
letterSpacing: -0.2,
}, },
body: { body: {
fontSize: fontSizes.md, fontSize: fontSizes.md,
fontWeight: '400', fontWeight: fontWeights.regular,
lineHeight: fontSizes.md * 1.5, lineHeight: fontSizes.md * 1.6,
letterSpacing: 0.1,
}, },
caption: { caption: {
fontSize: fontSizes.sm, fontSize: fontSizes.sm,
fontWeight: '400', fontWeight: fontWeights.regular,
lineHeight: fontSizes.sm * 1.4, lineHeight: fontSizes.sm * 1.5,
letterSpacing: 0.2,
}, },
label: { label: {
fontSize: fontSizes.xs, fontSize: fontSizes.xs,
fontWeight: '500', fontWeight: fontWeights.medium,
lineHeight: fontSizes.xs * 1.4, lineHeight: fontSizes.xs * 1.4,
letterSpacing: 0.3,
}, },
}; };
@@ -55,6 +62,7 @@ const Text: React.FC<CustomTextProps> = ({
children, children,
variant = 'body', variant = 'body',
color, color,
weight,
numberOfLines, numberOfLines,
onPress, onPress,
style, style,
@@ -64,6 +72,7 @@ const Text: React.FC<CustomTextProps> = ({
const textStyle = [ const textStyle = [
styles.base, styles.base,
variantStyles[variant], variantStyles[variant],
weight ? { fontWeight: fontWeights[weight] } : null,
color ? { color } : { color: colors.text.primary }, color ? { color } : { color: colors.text.primary },
style, style,
]; ];

View File

@@ -2,6 +2,39 @@
* 与明暗无关的设计 token * 与明暗无关的设计 token
*/ */
// 字体配置 - 使用系统字体栈,优化字重
export const fontFamily = {
// iOS 系统字体
ios: {
regular: 'System',
medium: 'System',
semibold: 'System',
bold: 'System',
},
// Android 系统字体
android: {
regular: 'Roboto',
medium: 'Roboto',
semibold: 'Roboto',
bold: 'Roboto',
},
// 通用字体栈
system: {
regular: 'System',
medium: 'System',
semibold: 'System',
bold: 'System',
},
};
// 字体字重 - 使用数值更精确控制
export const fontWeights = {
regular: '400' as const,
medium: '500' as const,
semibold: '600' as const,
bold: '700' as const,
};
export const fontSizes = { export const fontSizes = {
xs: 10, xs: 10,
sm: 12, sm: 12,