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

Posted 2023-02-16

【中文标题】与 React Native <Modal /> 背后的内容交互？

【英文标题】：Interacting with content behind a React Native <Modal />?

【发布时间】：2021-07-05 17:06:15

【问题描述】：

我想在 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 道具吗？

嗯，我没有。也许这就是导致我的问题的原因。我会在早上试一试，然后告诉你进展如何。