尝试修复播放详情页歌词导致UI冻结的问题

publish/changeLog.md

@@ -1,4 +1,4 @@
 ### 修复
 
 - 尝试修复软件启动时恢复上一次播放的歌曲可能导致软件崩溃的问题
-- 修复播放详情页歌词的一个滚动错误
+- 尝试修复播放详情页歌词导致UI冻结的问题

src/screens/PlayDetail/Portrait/Player/Lyric.js

@@ -41,7 +41,7 @@ export default memo(() => {
 
   // const imgWidth = useMemo(() => layout.width * 0.75, [layout.width])
   const handleScrollToActive = useCallback((index = lineRef.current) => {
-    if (scrollViewRef.current && linesRef.current.length) {
+    if (scrollViewRef.current) {
       scrollViewRef.current.scrollToIndex({
         index,
         animated: true,
@@ -68,17 +68,13 @@ export default memo(() => {
   }
 
   useEffect(() => {
-    setTimeout(() => {
-      isPauseScrollRef.current = false
-      handleScrollToActive()
-    }, 100)
     return () => {
       if (scrollTimoutRef.current) {
         clearTimeout(scrollTimoutRef.current)
         scrollTimoutRef.current = null
       }
     }
-  }, [handleScrollToActive])
+  }, [])
 
   useEffect(() => {
     linesRef.current = lyricLines
@@ -89,6 +85,10 @@ export default memo(() => {
     })
     if (isFirstSetLrc.current) {
       isFirstSetLrc.current = false
+      setTimeout(() => {
+        isPauseScrollRef.current = false
+        handleScrollToActive()
+      }, 100)
     } else {
       handleScrollToActive(0)
     }
@@ -96,7 +96,7 @@ export default memo(() => {
 
   useEffect(() => {
     lineRef.current = line
-    if (!scrollViewRef.current || !linesRef.current.length || isPauseScrollRef.current) return
+    if (!scrollViewRef.current || isPauseScrollRef.current) return
     handleScrollToActive()
   }, [handleScrollToActive, line])
 
@@ -132,6 +132,8 @@ export default memo(() => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    paddingLeft: 10,
+    paddingRight: 10,
     // backgroundColor: 'rgba(0,0,0,0.1)',
   },
   space: {
@@ -141,7 +143,9 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     textAlign: 'center',
     fontSize: 16,
-    lineHeight: 28,
+    lineHeight: 22,
+    paddingTop: 5,
+    paddingBottom: 5,
     // opacity: 0,
   },
 })

src/screens/PlayDetail/Portrait/Player/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, memo, useState, useMemo } from 'react'
+import React, { useEffect, useCallback, memo, useState, useMemo, useRef } from 'react'
 import { View, StyleSheet } from 'react-native'
 
 import Header from '../components/Header'
@@ -11,6 +11,20 @@ import Pic from './Pic'
 import Lyric from './Lyric'
 import { screenkeepAwake, screenUnkeepAwake } from '@/utils/utils'
 
+const LyricPage = ({ activeIndex }) => {
+  const initedRef = useRef(false)
+  const lyric = useMemo(() => <Lyric />, [])
+  switch (activeIndex) {
+    // case 3:
+    case 1:
+      if (!initedRef.current) initedRef.current = true
+      return lyric
+    default:
+      return initedRef.current ? lyric : null
+  }
+  // return activeIndex == 0 || activeIndex == 1 ? setting : null
+}
+
 // global.iskeep = false
 export default memo(() => {
   const theme = useGetter('common', 'theme')
@@ -25,8 +39,6 @@ export default memo(() => {
     }
   }, [])
 
-  const pic = useMemo(() => <Pic />, [])
-
   return (
     <>
       <Header />
@@ -37,10 +49,10 @@ export default memo(() => {
           style={styles.pagerView}
         >
           <View collapsable={false} style={styles.pageStyle}>
-            {pageIndex == 0 ? pic : null}
+            <Pic />
           </View>
           <View collapsable={false} style={styles.pageStyle}>
-            {pageIndex == 1 ? <Lyric /> : null}
+            <LyricPage activeIndex={pageIndex} />
           </View>
         </PagerView>
         <View style={styles.pageIndicator}>