修复UI异常

src/components/OnlineList/MultipleModeBar.tsx

@@ -53,6 +53,7 @@ export default forwardRef<MultipleModeBarType, MultipleModeBarProps>(({ onSelect
     // console.log('show List')
     setVisible(true)
     setAnimatPlayed(false)
+    requestAnimationFrame(() => {
       animTranslateY.setValue(20)
 
       Animated.parallel([
@@ -69,6 +70,7 @@ export default forwardRef<MultipleModeBarType, MultipleModeBarProps>(({ onSelect
       ]).start(() => {
         setAnimatPlayed(true)
       })
+    })
   }, [animFade, animTranslateY])
 
   const handleHide = useCallback(() => {

src/components/SearchTipList/index.tsx

@@ -47,7 +47,7 @@ const Component = <T extends ItemT<T>>({ onPressBg = noop, ...props }: SearchTip
     if (!heightRef.current) return
     setVisible(true)
     setAnimatPlayed(false)
-
+    requestAnimationFrame(() => {
       translateY.setValue(-heightRef.current / 2)
       scaleY.setValue(0)
 
@@ -70,6 +70,7 @@ const Component = <T extends ItemT<T>>({ onPressBg = noop, ...props }: SearchTip
       ]).start(() => {
         setAnimatPlayed(true)
       })
+    })
   }, [translateY, scaleY])
 
   const handleHide = useCallback(() => {

src/components/common/Modal.tsx

@@ -1,6 +1,6 @@
 // import { createStyle } from '@/utils/tools'
-import React, { useImperativeHandle, forwardRef, useState, useMemo } from 'react'
-import { Modal, TouchableWithoutFeedback, View, type ModalProps as _ModalProps } from 'react-native'
+import React, { useImperativeHandle, forwardRef, useState, useMemo, useCallback } from 'react'
+import { type LayoutChangeEvent, Modal, TouchableWithoutFeedback, View, type ModalProps as _ModalProps, StyleSheet } from 'react-native'
 import StatusBar from './StatusBar'
 // import { useDimensions } from '@/utils/hooks'
 
@@ -54,6 +54,7 @@ export default forwardRef<ModalType, ModalProps>(({
   ...props
 }: ModalProps, ref) => {
   const [visible, setVisible] = useState(false)
+  const [height, setHeight] = useState<number>(0)
   // const { window: windowSize } = useDimensions()
   const handleRequestClose = () => {
     if (keyHide) {
@@ -68,6 +69,11 @@ export default forwardRef<ModalType, ModalProps>(({
     }
   }
 
+  const handleLayout = useCallback((e: LayoutChangeEvent) => {
+    // console.log('e.nativeEvent.layout.height', e.nativeEvent.layout.height)
+    setHeight(e.nativeEvent.layout.height + StatusBar.currentHeight)
+  }, [])
+
   useImperativeHandle(ref, () => ({
     setVisible(_visible) {
       if (visible == _visible) return
@@ -89,12 +95,18 @@ export default forwardRef<ModalType, ModalProps>(({
       {...props}
     >
       {/* <StatusBar /> */}
+      <View style={StyleSheet.absoluteFill} onLayout={handleLayout} />
       {/* <View style={{ flex: 1, paddingTop: statusBarPadding ? StatusBar.currentHeight : 0 }}> */}
+      {
+        height == 0 ? null
+          : (
               <TouchableWithoutFeedback style={{ flex: 1, paddingTop: statusBarPadding ? StatusBar.currentHeight : 0 }} onPress={handleBgClose}>
-        <View style={{ flex: 1, backgroundColor: bgColor }}>
+                <View style={{ position: 'absolute', top: 0, left: 0, width: '100%', height, backgroundColor: bgColor }}>
                   {memoChildren}
                 </View>
               </TouchableWithoutFeedback>
+            )
+      }
       {/* </View> */}
     </Modal>
   )

src/screens/Home/Views/Mylist/MusicList/ListSearchBar.tsx

@@ -73,6 +73,7 @@ export default forwardRef<ListSearchBarType, ListSearchBarProps>(({ onSearch, on
     // console.log('show List')
     setVisible(true)
     setAnimatPlayed(false)
+    requestAnimationFrame(() => {
       animTranslateY.setValue(-20)
 
       Animated.parallel([
@@ -89,6 +90,7 @@ export default forwardRef<ListSearchBarType, ListSearchBarProps>(({ onSearch, on
       ]).start(() => {
         setAnimatPlayed(true)
       })
+    })
   }, [animFade, animTranslateY])
 
   const handleHide = useCallback(() => {

src/screens/Home/Views/Mylist/MusicList/MultipleModeBar.tsx

@@ -55,6 +55,7 @@ export default forwardRef<MultipleModeBarType, MultipleModeBarProps>(({ onSelect
     // console.log('show List')
     setVisible(true)
     setAnimatPlayed(false)
+    requestAnimationFrame(() => {
       animTranslateY.setValue(-20)
 
       Animated.parallel([
@@ -71,6 +72,7 @@ export default forwardRef<MultipleModeBarType, MultipleModeBarProps>(({ onSelect
       ]).start(() => {
         setAnimatPlayed(true)
       })
+    })
   }, [animFade, animTranslateY])
 
   const handleHide = useCallback(() => {