1import React, {memo} from 'react'; 2import {StyleSheet} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import ThemeText from '@/components/base/themeText'; 5import useColors from '@/hooks/useColors'; 6import Config from '@/core/config'; 7import {fontSizeConst} from '@/constants/uiConst'; 8 9interface ILyricItemComponentProps { 10 // 行号 11 index?: number; 12 // 显示 13 light?: boolean; 14 // 高亮 15 highlight?: boolean; 16 // 文本 17 text?: string; 18 19 onLayout?: (index: number, height: number) => void; 20} 21 22const fontSizeMap = { 23 0: fontSizeConst.description, 24 1: fontSizeConst.content, 25 2: fontSizeConst.appbar, 26 3: rpx(40), 27} as Record<number, number>; 28 29function _LyricItemComponent(props: ILyricItemComponentProps) { 30 const {light, highlight, text, onLayout, index} = props; 31 32 const colors = useColors(); 33 const detailFontSize = Config.useConfig('setting.lyric.detailFontSize'); 34 35 return ( 36 <ThemeText 37 onLayout={({nativeEvent}) => { 38 if (index !== undefined) { 39 onLayout?.(index, nativeEvent.layout.height); 40 } 41 }} 42 style={[ 43 lyricStyles.item, 44 { 45 fontSize: 46 fontSizeMap[detailFontSize ?? 1] || 47 fontSizeConst.content, 48 }, 49 highlight 50 ? [ 51 lyricStyles.highlightItem, 52 { 53 color: colors.primary, 54 }, 55 ] 56 : null, 57 light ? lyricStyles.draggingItem : null, 58 ]}> 59 {text} 60 </ThemeText> 61 ); 62} 63// 歌词 64const LyricItemComponent = memo( 65 _LyricItemComponent, 66 (prev, curr) => 67 prev.light === curr.light && 68 prev.highlight === curr.highlight && 69 prev.text === curr.text && 70 prev.index === curr.index, 71); 72 73export default LyricItemComponent; 74 75const lyricStyles = StyleSheet.create({ 76 highlightItem: { 77 opacity: 1, 78 }, 79 item: { 80 color: 'white', 81 opacity: 0.6, 82 paddingHorizontal: rpx(64), 83 paddingVertical: rpx(24), 84 width: '100%', 85 textAlign: 'center', 86 textAlignVertical: 'center', 87 }, 88 draggingItem: { 89 opacity: 0.9, 90 color: 'white', 91 }, 92}); 93