与 React Native <Modal /> 背后的内容交互？答案

【问题标题】：Interacting with content behind a React Native <Modal />?与 React Native <Modal /> 背后的内容交互？
【发布时间】：2021-07-05 17:06:15
【问题描述】：

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

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

【问题讨论】：

标签： react-native modal-dialog react-native-modal

【解决方案1】：

你所问的听起来就像一个具有高 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 组件中没有看到任何选项来获得该行为

【讨论】：

有道理。对我来说，问题在于我大量建立在 react-native-modal 之上，它在内部使用标准模态。我不得不patch the library to allow passing a custom modal component。
@Maros 你试过coverScreen 道具吗？
嗯，我没有。也许这就是导致我的问题的原因。我会在早上试一试，然后告诉你进展如何。