React Native TouchableWithoutFeedback on view with position

Question

当用户单击I按钮时，我有一个想要显示的模态。模态通过将位置设置为"绝对"来包围整个屏幕。这很好，但当用户点击屏幕上的某个地方时，它应该会再次消失。然而，我的TouchAbleWithoutFeedback并没有记录压力。这似乎与位置绝对有关，但我无法确定。此外，模态下面的可点击元素仍然是可交互的，即使模态显示在这些元素的顶部。这是我的代码：

import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
render() 
{
return (<View>
<View style={styles.container}>
<OtherElements/>
</View>
<MainScreenInfoModal showModal={this.state.showInfoModal} />
</View>);
}



const MainScreenInfoModal = ({showModal}) =>
{   
if (showModal)
{
return <TouchableWithoutFeedback style={{zIndex: 10}} width={window.width} height={window.height} onPress={() => {console.log('press!')}}>
<View style={styles.infoModal} >
<SvgXml width={300} height={300} xml={mainscreenInfomodal} style={{
alignSelf: 'center',
marginTop: window.height * .45
}}/>
</View>
</TouchableWithoutFeedback>
}
return null;
}

const styles = StyleSheet.create({
container: 
{
fontSize: 26,
textAlign: 'center',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'center',
padding: 13,
fontWeight: "bold",
},
{...} ,
infoModal:
{
position: 'absolute',
bottom: 0,
width: window.width,
height: window.height,
backgroundColor: 'rgba(255,255,255,0.7)',
zIndex: 10
}});

Answer 1

尝试react-native-modalize库，它为我节省了大量时间和神经发育模式