使用绝对位置在视图上反应 Native TouchableWithoutFeedback

问题描述

我有一个模式，我想在用户点击 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,0.7)',zIndex: 10
                }});

解决方法

试试 react-native-modalize 库，它为我节省了大量开发模态的时间和精力