mirror of
https://github.com/ikun0014/lx-music-mobile.git
synced 2025-07-04 23:38:55 +08:00
修复弹出框被键盘遮挡的问题
This commit is contained in:
parent
009a9c5e03
commit
20daea8e71
@ -4,6 +4,7 @@ import { StyleSheet, View, Text, TouchableHighlight } from 'react-native'
|
|||||||
import Modal from './Modal'
|
import Modal from './Modal'
|
||||||
import Icon from './Icon'
|
import Icon from './Icon'
|
||||||
import { useGetter } from '@/store'
|
import { useGetter } from '@/store'
|
||||||
|
import { useKeyboard } from '@/utils/hooks'
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
centeredView: {
|
centeredView: {
|
||||||
@ -65,12 +66,13 @@ export default ({
|
|||||||
children,
|
children,
|
||||||
}) => {
|
}) => {
|
||||||
const theme = useGetter('common', 'theme')
|
const theme = useGetter('common', 'theme')
|
||||||
|
const { keyboardShown, keyboardHeight } = useKeyboard()
|
||||||
|
|
||||||
const closeBtnComponent = useMemo(() => closeBtn ? <TouchableHighlight style={styles.closeBtn} underlayColor={theme.secondary_5} onPress={hideDialog}><Icon name="close" style={{ color: theme.secondary40, fontSize: 10 }} /></TouchableHighlight> : null, [closeBtn, hideDialog, theme])
|
const closeBtnComponent = useMemo(() => closeBtn ? <TouchableHighlight style={styles.closeBtn} underlayColor={theme.secondary_5} onPress={hideDialog}><Icon name="close" style={{ color: theme.secondary40, fontSize: 10 }} /></TouchableHighlight> : null, [closeBtn, hideDialog, theme])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal visible={visible} hideModal={hideDialog} keyHide={keyHide} bgHide={bgHide}>
|
<Modal visible={visible} hideModal={hideDialog} keyHide={keyHide} bgHide={bgHide}>
|
||||||
<View style={{ ...styles.centeredView }}>
|
<View style={{ ...styles.centeredView, paddingBottom: keyboardShown ? keyboardHeight : 0 }}>
|
||||||
<View style={styles.modalView} onStartShouldSetResponder={() => true}>
|
<View style={styles.modalView} onStartShouldSetResponder={() => true}>
|
||||||
<View style={{ ...styles.header, backgroundColor: theme.secondary }}>
|
<View style={{ ...styles.header, backgroundColor: theme.secondary }}>
|
||||||
<Text style={{ ...styles.title, color: theme.primary }} numberOfLines={1}>{title}</Text>
|
<Text style={{ ...styles.title, color: theme.primary }} numberOfLines={1}>{title}</Text>
|
||||||
|
@ -16,12 +16,12 @@ export default () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow)
|
const keyboardDidShow = Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow)
|
||||||
Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide)
|
const keyboardDidHide = Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide)
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
Keyboard.removeListener('keyboardDidShow', handleKeyboardDidShow)
|
keyboardDidShow.remove()
|
||||||
Keyboard.removeListener('keyboardDidHide', handleKeyboardDidHide)
|
keyboardDidHide.remove()
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user