修复弹窗高度问题

This commit is contained in:
lyswhut 2023-08-06 20:32:42 +08:00
parent 384904d2fc
commit ff5076c586

View File

@ -1,6 +1,6 @@
// import { createStyle } from '@/utils/tools' // import { createStyle } from '@/utils/tools'
import React, { useImperativeHandle, forwardRef, useState, useMemo, useCallback } from 'react' import React, { useImperativeHandle, forwardRef, useState, useMemo } from 'react'
import { type LayoutChangeEvent, Modal, TouchableWithoutFeedback, View, type ModalProps as _ModalProps, StyleSheet } from 'react-native' import { Modal, TouchableWithoutFeedback, View, type ModalProps as _ModalProps } from 'react-native'
import StatusBar from './StatusBar' import StatusBar from './StatusBar'
// import { useDimensions } from '@/utils/hooks' // import { useDimensions } from '@/utils/hooks'
@ -54,7 +54,6 @@ 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) {
@ -69,11 +68,6 @@ 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
@ -95,18 +89,12 @@ 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}>
height == 0 ? null <View style={{ flex: 1, backgroundColor: bgColor }}>
: ( {memoChildren}
<TouchableWithoutFeedback style={{ flex: 1, paddingTop: statusBarPadding ? StatusBar.currentHeight : 0 }} onPress={handleBgClose}> </View>
<View style={{ position: 'absolute', top: 0, left: 0, width: '100%', height, backgroundColor: bgColor }}> </TouchableWithoutFeedback>
{memoChildren}
</View>
</TouchableWithoutFeedback>
)
}
{/* </View> */} {/* </View> */}
</Modal> </Modal>
) )