0

我有一个模式，我想在用户单击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
                }});
4

1 回答 1

0

试试react-native-modalize图书馆，它为我节省了很多时间和精力来开发模态

于 2021-04-22T09:37:38.160 回答