修复播放详情页屏幕常亮问题

src/navigation/hooks.js

@@ -31,20 +31,25 @@ export const useNavigationComponentDidAppear = (componentId, callback = () => {}
       // Make sure to unregister the listener during cleanup
       unsubscribe.remove()
     }
-  })
+  }, [callback, componentId])
 }
+
+export const onNavigationComponentDidDisappearEvent = (componentId, callback = () => {}) => {
+  const listener = {
+    componentDidDisappear: () => {
+      callback()
+    },
+  }
+  const unsubscribe = Navigation.events().registerComponentListener(listener, componentId)
+  return unsubscribe
+}
+
 export const useNavigationComponentDidDisappear = (componentId, callback = () => {}) => {
   useEffect(() => {
-    const listener = {
+    const unsubscribe = onNavigationComponentDidDisappearEvent(componentId, callback)
-      componentDidDisappear: () => {
-        callback()
-      },
-    }
-    // Register the listener to all events related to our component
-    const unsubscribe = Navigation.events().registerComponentListener(listener, componentId)
     return () => {
       // Make sure to unregister the listener during cleanup
       unsubscribe.remove()
     }
-  })
+  }, [callback, componentId])
 }

src/screens/Comment/components/Header.js

@@ -15,7 +15,7 @@ export default memo(({ musicInfo }) => {
   const { t } = useTranslation()
 
   const back = () => {
-    pop(componentIds.playDetail)
+    pop(componentIds.comment)
   }
 
   return (

src/screens/Comment/index.js

@@ -55,6 +55,12 @@ export default memo(({ componentId, animated }) => {
   const { t } = useTranslation()
   const theme = useGetter('common', 'theme')
   const [total, setTotal] = useState({ hot: 0, new: 0 })
+  const setComponentId = useDispatch('common', 'setComponentId')
+
+  useEffect(() => {
+    setComponentId({ name: 'comment', id: componentId })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   const tabs = useMemo(() => {
     return [

src/screens/PlayDetail/Landscape/Lyric.js

@@ -1,10 +1,11 @@
 import React, { memo, useMemo, useCallback, useEffect, useRef } from 'react'
 import { View, Text, StyleSheet, FlatList } from 'react-native'
 import { useGetter, useDispatch } from '@/store'
-import { useLayout } from '@/utils/hooks'
+// import { useLayout } from '@/utils/hooks'
 import { useLrcPlay, useLrcSet } from '@/plugins/lyric'
-import { log } from '@/utils/log'
+// import { log } from '@/utils/log'
-import { toast } from '@/utils/tools'
+// import { toast } from '@/utils/tools'
+import { onNavigationComponentDidDisappearEvent } from '@/navigation'
 
 const LrcLine = memo(({ lrc, line, activeLine }) => {
   const theme = useGetter('common', 'theme')
@@ -36,6 +37,7 @@ export default memo(() => {
   const lineRef = useRef(0)
   const linesRef = useRef([])
   const isFirstSetLrc = useRef(true)
+  const componentIds = useGetter('common', 'componentIds')
   // const playMusicInfo = useGetter('player', 'playMusicInfo')
   // const [imgUrl, setImgUrl] = useState(null)
   // const theme = useGetter('common', 'theme')
@@ -92,6 +94,18 @@ export default memo(() => {
     }
   }, [])
 
+  useEffect(() => {
+    let listener
+    if (componentIds.comment) {
+      listener = onNavigationComponentDidDisappearEvent(componentIds.comment, () => {
+
+      })
+    }
+    return () => {
+      if (listener) listener.remove()
+    }
+  }, [componentIds])
+
   useEffect(() => {
     linesRef.current = lyricLines
     if (!scrollViewRef.current || !scrollViewRef.current.props.data.length) return

src/screens/PlayDetail/Landscape/index.js

@@ -1,7 +1,8 @@
-import React, { memo, useEffect, useCallback } from 'react'
+import React, { memo, useEffect, useCallback, useMemo } from 'react'
 import { View, Text, StyleSheet } from 'react-native'
 import { useGetter, useDispatch } from '@/store'
 import { screenkeepAwake, screenUnkeepAwake } from '@/utils/utils'
+import { onNavigationComponentDidDisappearEvent } from '@/navigation'
 
 import Header from './components/Header'
 import Pic from './Pic'
@@ -12,34 +13,52 @@ import MoreBtn from './MoreBtn'
 
 export default memo(({ componentId, animated }) => {
   const theme = useGetter('common', 'theme')
+  const componentIds = useGetter('common', 'componentIds')
+
+  useEffect(() => {
+    let listener
+    if (componentIds.comment) {
+      screenUnkeepAwake()
+      listener = onNavigationComponentDidDisappearEvent(componentIds.comment, () => {
+        screenkeepAwake()
+      })
+    }
+    return () => {
+      if (listener) listener.remove()
+    }
+  }, [componentIds])
+
   useEffect(() => {
     screenkeepAwake()
     return () => {
       screenUnkeepAwake()
     }
   }, [])
-  return (
+  const component = useMemo(() => {
-    <>
+    return (
-      <Header />
+      <>
-      <View style={{ flex: 1, backgroundColor: theme.primary }}>
+        <Header />
-        <View style={styles.container}>
+        <View style={{ flex: 1, backgroundColor: theme.primary }}>
-          <View style={styles.left}>
+          <View style={styles.container}>
-            <Pic componentId={componentId} animated={animated} />
+            <View style={styles.left}>
-            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }} nativeID="pageIndicator">
+              <Pic componentId={componentId} animated={animated} />
-              <Title />
+              <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }} nativeID="pageIndicator">
-              <View>
+                <Title />
-                <MoreBtn />
+                <View>
+                  <MoreBtn />
+                </View>
               </View>
             </View>
+            <View style={styles.right}>
+              <Lyric />
+            </View>
           </View>
-          <View style={styles.right}>
+          <Player />
-            <Lyric />
-          </View>
         </View>
-        <Player />
+      </>
-      </View>
+    )
-    </>
+  }, [animated, componentId, theme])
-  )
+  return component
 })
 
 const styles = StyleSheet.create({

src/screens/PlayDetail/Portrait/Lyric.js

@@ -1,10 +1,10 @@
 import React, { memo, useMemo, useCallback, useEffect, useRef } from 'react'
 import { View, Text, StyleSheet, FlatList } from 'react-native'
 import { useGetter, useDispatch } from '@/store'
-import { useLayout } from '@/utils/hooks'
+// import { useLayout } from '@/utils/hooks'
 import { useLrcPlay, useLrcSet } from '@/plugins/lyric'
-import { log } from '@/utils/log'
+// import { log } from '@/utils/log'
-import { toast } from '@/utils/tools'
+// import { toast } from '@/utils/tools'
 
 const LrcLine = memo(({ lrc, line, activeLine }) => {
   const theme = useGetter('common', 'theme')

src/screens/PlayDetail/Portrait/index.js

@@ -10,6 +10,7 @@ import PagerView from 'react-native-pager-view'
 import Pic from './Pic'
 import Lyric from './Lyric'
 import { screenkeepAwake, screenUnkeepAwake } from '@/utils/utils'
+import { onNavigationComponentDidDisappearEvent } from '@/navigation'
 
 const LyricPage = ({ activeIndex }) => {
   const initedRef = useRef(false)
@@ -29,9 +30,25 @@ const LyricPage = ({ activeIndex }) => {
 export default memo(({ componentId, animated }) => {
   const theme = useGetter('common', 'theme')
   const [pageIndex, setPageIndex] = useState(0)
+  const componentIds = useGetter('common', 'componentIds')
+  const currentIndexRef = useRef(pageIndex)
+
+  useEffect(() => {
+    let listener
+    if (componentIds.comment) {
+      if (currentIndexRef.current == 1) screenUnkeepAwake()
+      listener = onNavigationComponentDidDisappearEvent(componentIds.comment, () => {
+        if (currentIndexRef.current == 1) screenkeepAwake()
+      })
+    }
+    return () => {
+      if (listener) listener.remove()
+    }
+  }, [componentIds])
 
   const onPageSelected = useCallback(({ nativeEvent }) => {
     setPageIndex(nativeEvent.position)
+    currentIndexRef.current = nativeEvent.position
     if (nativeEvent.position == 1) {
       screenkeepAwake()
     } else {

src/screens/PlayDetail/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { View, StyleSheet } from 'react-native'
+// import { View, StyleSheet } from 'react-native'
 import { useGetter, useDispatch } from '@/store'
 import { useDimensions } from '@/utils/hooks'
 import { useNavigationComponentDidDisappear, useNavigationComponentDidAppear } from '@/navigation'