优化详情页歌词显示

src/screens/Home/Views/Setting/Vertical/index.tsx

@@ -46,10 +46,8 @@ const Content = () => {
       style={{ elevation: 1 }}
     >
       <Header ref={headerRef} onShowNavBar={() => drawer.current?.openDrawer()} />
-      <ScrollView keyboardShouldPersistTaps={'always'}>
+      <ScrollView contentContainerStyle={styles.main} keyboardShouldPersistTaps={'always'}>
-        <View style={styles.main}>
         <Main ref={mainRef} />
-        </View>
       </ScrollView>
       {/* <View style={styles.container}>
       </View> */}
@@ -67,7 +65,6 @@ const styles = createStyle({
     paddingRight: 15,
     paddingTop: 15,
     paddingBottom: 15,
-    flex: 0,
   },
 })
 

src/screens/PlayDetail/Horizontal/Lyric.tsx

@@ -21,9 +21,10 @@ const LrcLine = memo(({ line, lineNum, activeLine }: {
   activeLine: number
 }) => {
   const theme = useTheme()
-  const playerPortraitStyle = useSettingValue('playDetail.horizontal.style.lrcFontSize')
+  const lrcFontSize = useSettingValue('playDetail.horizontal.style.lrcFontSize')
   const textAlign = useSettingValue('playDetail.style.align')
-  const lineHeight = setSpText(playerPortraitStyle / 10) * 1.25
+  const size = lrcFontSize / 10
+  const lineHeight = setSpText(size) * 1.25
 
   return (
     <View style={styles.line}>
@@ -31,14 +32,14 @@ const LrcLine = memo(({ line, lineNum, activeLine }: {
         ...styles.lineText,
         textAlign,
         lineHeight,
-      }} color={activeLine == lineNum ? theme['c-primary'] : theme['c-350']} size={playerPortraitStyle / 10}>{line.text}</Text>
+      }} textBreakStrategy="simple" color={activeLine == lineNum ? theme['c-primary'] : theme['c-350']} size={size}>{line.text}</Text>
       {
         line.extendedLyrics.map((lrc, index) => {
           return (<Text style={{
             ...styles.lineTranslationText,
             textAlign,
             lineHeight: lineHeight * 0.8,
-          }} key={index} color={activeLine == lineNum ? theme['c-primary-alpha-200'] : theme['c-350']} size={playerPortraitStyle / 10 * 0.8}>{lrc}</Text>)
+          }} textBreakStrategy="simple" key={index} color={activeLine == lineNum ? theme['c-primary-alpha-200'] : theme['c-350']} size={size * 0.8}>{lrc}</Text>)
         })
       }
     </View>
@@ -87,6 +88,11 @@ export default () => {
   const handleScrollBeginDrag = () => {
     isPauseScrollRef.current = true
     if (scrollTimoutRef.current) clearTimeout(scrollTimoutRef.current)
+  }
+
+  const onScrollEndDrag = () => {
+    if (!isPauseScrollRef.current) return
+    if (scrollTimoutRef.current) clearTimeout(scrollTimoutRef.current)
     scrollTimoutRef.current = setTimeout(() => {
       scrollTimoutRef.current = null
       isPauseScrollRef.current = false
@@ -157,6 +163,7 @@ export default () => {
       ListHeaderComponent={spaceComponent}
       ListFooterComponent={spaceComponent}
       onScrollBeginDrag={handleScrollBeginDrag}
+      onScrollEndDrag={onScrollEndDrag}
       fadingEdgeLength={100}
       initialNumToRender={Math.max(line + 10, 10)}
       onScrollToIndexFailed={handleScrollToIndexFailed}

src/screens/PlayDetail/Vertical/Lyric.tsx

@@ -59,9 +59,10 @@ const LrcLine = memo(({ line, lineNum, activeLine }: {
   activeLine: number
 }) => {
   const theme = useTheme()
-  const playerPortraitStyle = useSettingValue('playDetail.vertical.style.lrcFontSize')
+  const lrcFontSize = useSettingValue('playDetail.vertical.style.lrcFontSize')
   const textAlign = useSettingValue('playDetail.style.align')
-  const lineHeight = setSpText(playerPortraitStyle / 10) * 1.25
+  const size = lrcFontSize / 10
+  const lineHeight = setSpText(size) * 1.25
 
   return (
     <View style={styles.line}>
@@ -69,14 +70,14 @@ const LrcLine = memo(({ line, lineNum, activeLine }: {
         ...styles.lineText,
         textAlign,
         lineHeight,
-      }} color={activeLine == lineNum ? theme['c-primary'] : theme['c-350']} size={playerPortraitStyle / 10}>{line.text}</Text>
+      }} textBreakStrategy="simple" color={activeLine == lineNum ? theme['c-primary'] : theme['c-350']} size={size}>{line.text}</Text>
       {
         line.extendedLyrics.map((lrc, index) => {
           return (<Text style={{
             ...styles.lineTranslationText,
             textAlign,
             lineHeight: lineHeight * 0.8,
-          }} key={index} color={activeLine == lineNum ? theme['c-primary-alpha-200'] : theme['c-350']} size={playerPortraitStyle / 10 * 0.8}>{lrc}</Text>)
+          }} textBreakStrategy="simple" key={index} color={activeLine == lineNum ? theme['c-primary-alpha-200'] : theme['c-350']} size={size * 0.8}>{lrc}</Text>)
         })
       }
     </View>
@@ -125,6 +126,11 @@ export default () => {
   const handleScrollBeginDrag = () => {
     isPauseScrollRef.current = true
     if (scrollTimoutRef.current) clearTimeout(scrollTimoutRef.current)
+  }
+
+  const onScrollEndDrag = () => {
+    if (!isPauseScrollRef.current) return
+    if (scrollTimoutRef.current) clearTimeout(scrollTimoutRef.current)
     scrollTimoutRef.current = setTimeout(() => {
       scrollTimoutRef.current = null
       isPauseScrollRef.current = false
@@ -195,6 +201,7 @@ export default () => {
       ListHeaderComponent={spaceComponent}
       ListFooterComponent={spaceComponent}
       onScrollBeginDrag={handleScrollBeginDrag}
+      onScrollEndDrag={onScrollEndDrag}
       fadingEdgeLength={100}
       initialNumToRender={Math.max(line + 10, 10)}
       onScrollToIndexFailed={handleScrollToIndexFailed}
@@ -213,8 +220,8 @@ const styles = createStyle({
     paddingTop: '80%',
   },
   line: {
-    paddingTop: 10,
+    marginTop: 10,
-    paddingBottom: 10,
+    marginBottom: 10,
     // opacity: 0,
   },
   lineText: {