react-native - 当 Modal 可见时，有没有办法与背景组件进行交互？

Question

正如标题所述，我正在尝试以仅占用屏幕的某些部分的方式实现模式，以便允许用户能够与某些背景组件进行交互。作为参考，我正在使用该react-native-modal库。当前屏幕如下所示：

我希望能够与标题中的图标进行交互（两者都已经包装在 Touchable 组件中，因此已经可以点击）。但是，当模态可见时，我无法与它们进行交互。

我的实现是这样的：

<Modal
  isVisible={showModal}
  style={styles.modalContainer}
  customBackdrop={<CustomBackdrop />}
  onBackdropPress={() => setShowModal(false)}
  animationIn="fadeInDown"
  animationOut="fadeOutUp"
>
  <View style={styles.container}>
    <TouchableOpacity style={styles.itemContainer}>
      <Text style={styles.label}>A</Text>
    </TouchableOpacity>

    <TouchableOpacity style={styles.itemContainer}>
      <Text style={styles.label}>B</Text>
    </TouchableOpacity>

    <TouchableOpacity style={styles.itemContainer}>
      <Text style={styles.label}>C</Text>
    </TouchableOpacity>

    <TouchableOpacity style={styles.itemContainer}>
      <Text style={styles.label}>D</Text>
    </TouchableOpacity>

    <TouchableOpacity
      style={[
        styles.itemContainer,
        { borderBottomLeftRadius: 16, borderBottomRightRadius: 16 },
      ]}
    >
      <Text style={styles.label}>E</Text>
    </TouchableOpacity>
  </View>
</Modal>

我的自定义背景如下所示：

<View
  style={{
    marginTop: hp("50%"),
    flex: 1,
  }}
>
  <TouchableWithoutFeedback onPress={() => setShowModal(false)}>
    <View
      style={{ backgroundColor: "#000", height: hp("50%"), width: wp("100%") }}
    />
  </TouchableWithoutFeedback>
</View>