修复弹出框无法点击背景关闭的问题

This commit is contained in:
lyswhut 2023-03-20 17:14:59 +08:00
parent 23fb01d093
commit 241fdb4818

View File

@ -1,23 +1,23 @@
import { createStyle } from '@/utils/tools' // import { createStyle } from '@/utils/tools'
import React, { useImperativeHandle, forwardRef, useState, useMemo } from 'react' import React, { useImperativeHandle, forwardRef, useState, useMemo } from 'react'
import { Modal, TouchableWithoutFeedback, View, type ModalProps as _ModalProps } 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'
const styles = createStyle({ // const styles = createStyle({
// container: { // container: {
// flex: 1, // flex: 1,
// }, // },
mask: { // // mask: {
position: 'absolute', // // position: 'absolute',
top: 0, // // top: 0,
left: 0, // // left: 0,
bottom: 0, // // bottom: 0,
right: 0, // // right: 0,
// width: '100%', // // // width: '100%',
// height: '100%', // // // height: '100%',
}, // // },
}) // })
export interface ModalProps extends Omit<_ModalProps, 'visible'> { export interface ModalProps extends Omit<_ModalProps, 'visible'> {
onHide?: () => void onHide?: () => void
@ -89,12 +89,13 @@ export default forwardRef<ModalType, ModalProps>(({
{...props} {...props}
> >
{/* <StatusBar /> */} {/* <StatusBar /> */}
<View style={{ flex: 1, paddingTop: statusBarPadding ? StatusBar.currentHeight : 0 }}> {/* <View style={{ flex: 1, paddingTop: statusBarPadding ? StatusBar.currentHeight : 0 }}> */}
<TouchableWithoutFeedback style={styles.mask} onPress={handleBgClose}> <TouchableWithoutFeedback style={{ flex: 1, paddingTop: statusBarPadding ? StatusBar.currentHeight : 0 }} onPress={handleBgClose}>
<View style={{ ...styles.mask, backgroundColor: bgColor }}></View> <View style={{ flex: 1, backgroundColor: bgColor }}>
</TouchableWithoutFeedback>
{memoChildren} {memoChildren}
</View> </View>
</TouchableWithoutFeedback>
{/* </View> */}
</Modal> </Modal>
) )
}) })