与 React Native <Modal /> 背后的内容进行交互？

问题描述

我想在 React Native 应用程序中显示 Modal，但仍然能够通过按下和平移事件与模态后面的内容进行交互。这可能吗？

它似乎阻止了所有带有内容的事件，这对于我正在构建的应用程序类型来说是有问题的。任何围绕此的黑客也将受到欢迎。

解决方法

您所要求的听起来就像一个具有高 zIndex 值的绝对组件

     const [modalVisible,setModalVisible] = React.useState(false);

     ...
     {modalVisible && <Card style={styles.modal}>
        <Text>I'm a pseudo modal</Text>
        <Pressable
          style={[styles.button,styles.buttonClose]}
          onPress={() => setModalVisible(false)}
        >
          <Text style={styles.textStyle}>Hide Modal</Text>
        </Pressable>
      </Card>}
      ...


const styles = StyleSheet.create({
  ...
  modal: {
    backgroundColor: 'tomato',padding: 20,alignSelf: 'center',top: '50%',position: 'absolute',zIndex: 9999
  }
  ...
});

https://snack.expo.io/@diedu89/pseudomodal

您可能需要制定一个自定义组件，我在 Modal 组件中看不到任何选项来获得该行为