React Native 防止模式在覆蓋點擊時關閉

Question

我有一個不占用整個屏幕的自定義高度的模態。 當用戶單擊覆蓋層或模態容器外部時，我想防止模態關閉。 下面是模態顯示方式的屏幕截圖

我已經將模態組件包裹在TouchableWithoutFeedback周圍，並將模態透明設置為false ，但是當用戶在模態外部點擊時它仍然會關閉。

以下是我當前的模態配置。

 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

我會使用 react-native-modal package，它的樣式設置為 margin: 0 和 justifyContent: "flex-end"。 在此，我使用 flex:1 和 justifyContent: "flex-end" 維護一個視圖。 然后創建模態容器（白色部分）並將子組件包裹在該容器內的 TouchableWithoutFeedback 中。