renil/lx-music-mobile-mod
1
0
Fork 0
mirror of https://github.com/ikun0014/lx-music-mobile.git synced 2025-07-03 17:12:10 +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')
setVisible(true)
setAnimatPlayed(false)
animTranslateY.setValue(20)
requestAnimationFrame(() => {
animTranslateY.setValue(20)
Animated.parallel([
Animated.timing(animFade, {
toValue: 0.92,
duration: 200,
useNativeDriver: true,
}),
Animated.timing(animTranslateY, {
toValue: 0,
duration: 200,
useNativeDriver: true,
}),
]).start(() => {
setAnimatPlayed(true)
Animated.parallel([
Animated.timing(animFade, {
toValue: 0.92,
duration: 200,
useNativeDriver: true,
}),
Animated.timing(animTranslateY, {
toValue: 0,
duration: 200,
useNativeDriver: true,
}),
]).start(() => {
setAnimatPlayed(true)
})
})
}, [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
setVisible(true)
setAnimatPlayed(false)
requestAnimationFrame(() => {
translateY.setValue(-heightRef.current / 2)
scaleY.setValue(0)
translateY.setValue(-heightRef.current / 2)
scaleY.setValue(0)
Animated.parallel([
Animated.parallel([
// Animated.timing(fade, {
// toValue: 1,
// duration: 300,
// useNativeDriver: true,
// }),
Animated.timing(translateY, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}),
Animated.timing(scaleY, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}),
]).start(() => {
setAnimatPlayed(true)
Animated.timing(translateY, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}),
Animated.timing(scaleY, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}),
]).start(() => {
setAnimatPlayed(true)
})
})
}, [translateY, scaleY])

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

@ -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 }}> */}
<TouchableWithoutFeedback style={{ flex: 1, paddingTop: statusBarPadding ? StatusBar.currentHeight : 0 }} onPress={handleBgClose}>
<View style={{ flex: 1, backgroundColor: bgColor }}>
{memoChildren}
</View>
</TouchableWithoutFeedback>
{
height == 0 ? null
: (
<TouchableWithoutFeedback style={{ flex: 1, paddingTop: statusBarPadding ? StatusBar.currentHeight : 0 }} onPress={handleBgClose}>
<View style={{ position: 'absolute', top: 0, left: 0, width: '100%', height, backgroundColor: bgColor }}>
{memoChildren}
</View>
</TouchableWithoutFeedback>
)
}
{/* </View> */}
</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')
setVisible(true)
setAnimatPlayed(false)
animTranslateY.setValue(-20)
requestAnimationFrame(() => {
animTranslateY.setValue(-20)
Animated.parallel([
Animated.timing(animFade, {
toValue: 0.92,
duration: 200,
useNativeDriver: true,
}),
Animated.timing(animTranslateY, {
toValue: 0,
duration: 200,
useNativeDriver: true,
}),
]).start(() => {
setAnimatPlayed(true)
Animated.parallel([
Animated.timing(animFade, {
toValue: 0.92,
duration: 200,
useNativeDriver: true,
}),
Animated.timing(animTranslateY, {
toValue: 0,
duration: 200,
useNativeDriver: true,
}),
]).start(() => {
setAnimatPlayed(true)
})
})
}, [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')
setVisible(true)
setAnimatPlayed(false)
animTranslateY.setValue(-20)
requestAnimationFrame(() => {
animTranslateY.setValue(-20)
Animated.parallel([
Animated.timing(animFade, {
toValue: 0.92,
duration: 200,
useNativeDriver: true,
}),
Animated.timing(animTranslateY, {
toValue: 0,
duration: 200,
useNativeDriver: true,
}),
]).start(() => {
setAnimatPlayed(true)
Animated.parallel([
Animated.timing(animFade, {
toValue: 0.92,
duration: 200,
useNativeDriver: true,
}),
Animated.timing(animTranslateY, {
toValue: 0,
duration: 200,
useNativeDriver: true,
}),
]).start(() => {
setAnimatPlayed(true)
})
})
}, [animFade, animTranslateY])