React Native 防止模式在覆盖点击时关闭

Question

I have a Modal with a custom height which doesn't take up the entire screen. I would like to prevent the Modal from closing when the user clicks on the overlay or outside the Modal Container. Below is a screen shot of how the modal displays

I have wrapped the Modal Component around TouchableWithoutFeedback and setting the Modal transparent to false but it still closes when the user taps outside the Modal.

Below is my current configurations of the Modal.

 onShow = () => {
        // performs slide in animation
        this.animation();
    };
      
return (

  <Modal transparent visible={visible} onShow={this.onShow}>
                <View
                    style={styles.flex}
                    onLayout={event => {
                        let {height: heightFull} = event.nativeEvent.layout;
                        this.setState({
                            height: getHeightView(heightFull, ratioHeight),
                        });
                    }}>
                   {* Modal Body * }
                    <Animated.View>
                    {* Some other content *}
                    </Animated.View>
                    {* End of Modal Body *}

                </View>
            </Modal>
)

Answer 1

I would use the react-native-modal package, with it's style set to margin: 0 and justifyContent: "flex-end". Within this, I maintain a View with flex:1 and justifyContent: "flex-end". Then create the modal container (the white section) and wrap the children within TouchableWithoutFeedback inside this container.