renil/lx-music-mobile-mod
1
0
Fork 0
mirror of https://github.com/ikun0014/lx-music-mobile.git synced 2025-07-03 14:42:09 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

修复UI异常

Browse Source
This commit is contained in:
lyswhut 2023-08-02 18:37:10 +08:00
parent 45b94432b0
commit 6a636d72e9
5 changed files with 84 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/OnlineList/MultipleModeBar.tsx
View File

@ -53,21 +53,23 @@ export default forwardRef<MultipleModeBarType, MultipleModeBarProps>(({ onSelect
// console.log('show List') // console.log('show List')
setVisible(true) setVisible(true)
setAnimatPlayed(false) setAnimatPlayed(false)
animTranslateY.setValue(20) requestAnimationFrame(() => {
animTranslateY.setValue(20)
Animated.parallel([ Animated.parallel([
Animated.timing(animFade, { Animated.timing(animFade, {
toValue: 0.92, toValue: 0.92,
duration: 200, duration: 200,
useNativeDriver: true, useNativeDriver: true,
}), }),
Animated.timing(animTranslateY, { Animated.timing(animTranslateY, {
toValue: 0, toValue: 0,
duration: 200, duration: 200,
useNativeDriver: true, useNativeDriver: true,
}), }),
]).start(() => { ]).start(() => {
setAnimatPlayed(true) setAnimatPlayed(true)
})
}) })
}, [animFade, animTranslateY]) }, [animFade, animTranslateY])

33
src/components/SearchTipList/index.tsx
View File

@ -47,28 +47,29 @@ const Component = <T extends ItemT<T>>({ onPressBg = noop, ...props }: SearchTip
if (!heightRef.current) return if (!heightRef.current) return
setVisible(true) setVisible(true)
setAnimatPlayed(false) setAnimatPlayed(false)
requestAnimationFrame(() => {
translateY.setValue(-heightRef.current / 2)
scaleY.setValue(0)
translateY.setValue(-heightRef.current / 2) Animated.parallel([
scaleY.setValue(0)
Animated.parallel([
// Animated.timing(fade, { // Animated.timing(fade, {
// toValue: 1, // toValue: 1,
// duration: 300, // duration: 300,
// useNativeDriver: true, // useNativeDriver: true,
// }), // }),
Animated.timing(translateY, { Animated.timing(translateY, {
toValue: 0, toValue: 0,
duration: 300, duration: 300,
useNativeDriver: true, useNativeDriver: true,
}), }),
Animated.timing(scaleY, { Animated.timing(scaleY, {
toValue: 1, toValue: 1,
duration: 300, duration: 300,
useNativeDriver: true, useNativeDriver: true,
}), }),
]).start(() => { ]).start(() => {
setAnimatPlayed(true) setAnimatPlayed(true)
})
}) })
}, [translateY, scaleY]) }, [translateY, scaleY])

26
src/components/common/Modal.tsx
View File

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

30
src/screens/Home/Views/Mylist/MusicList/ListSearchBar.tsx
View File

@ -73,21 +73,23 @@ export default forwardRef<ListSearchBarType, ListSearchBarProps>(({ onSearch, on
// console.log('show List') // console.log('show List')
setVisible(true) setVisible(true)
setAnimatPlayed(false) setAnimatPlayed(false)
animTranslateY.setValue(-20) requestAnimationFrame(() => {
animTranslateY.setValue(-20)
Animated.parallel([ Animated.parallel([
Animated.timing(animFade, { Animated.timing(animFade, {
toValue: 0.92, toValue: 0.92,
duration: 200, duration: 200,
useNativeDriver: true, useNativeDriver: true,
}), }),
Animated.timing(animTranslateY, { Animated.timing(animTranslateY, {
toValue: 0, toValue: 0,
duration: 200, duration: 200,
useNativeDriver: true, useNativeDriver: true,
}), }),
]).start(() => { ]).start(() => {
setAnimatPlayed(true) setAnimatPlayed(true)
})
}) })
}, [animFade, animTranslateY]) }, [animFade, animTranslateY])

30
src/screens/Home/Views/Mylist/MusicList/MultipleModeBar.tsx
View File

@ -55,21 +55,23 @@ export default forwardRef<MultipleModeBarType, MultipleModeBarProps>(({ onSelect
// console.log('show List') // console.log('show List')
setVisible(true) setVisible(true)
setAnimatPlayed(false) setAnimatPlayed(false)
animTranslateY.setValue(-20) requestAnimationFrame(() => {
animTranslateY.setValue(-20)
Animated.parallel([ Animated.parallel([
Animated.timing(animFade, { Animated.timing(animFade, {
toValue: 0.92, toValue: 0.92,
duration: 200, duration: 200,
useNativeDriver: true, useNativeDriver: true,
}), }),
Animated.timing(animTranslateY, { Animated.timing(animTranslateY, {
toValue: 0, toValue: 0,
duration: 200, duration: 200,
useNativeDriver: true, useNativeDriver: true,
}), }),
]).start(() => { ]).start(() => {
setAnimatPlayed(true) setAnimatPlayed(true)
})
}) })
}, [animFade, animTranslateY]) }, [animFade, animTranslateY])