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