使用react-native-modal时如何让背景头部组件可正常交互？

问题原因 #

react-native-modal 默认会渲染一个占满全屏的根容器，即便你自定义了下半部分的背景层，这个全屏容器仍然会拦截所有触摸事件，导致下层页面头部的按钮点击事件无法被触发。

解决方案 #

给Modal组件添加pointerEvents="box-none"属性即可，这个属性的作用是让当前容器本身不消费触摸事件，触摸事件会透传给下层组件，仅容器内部的子元素会响应对应的触摸操作。

同时需要调整Modal的外层样式，避免默认样式遮挡头部区域：

修改后的Modal代码

<Modal
  isVisible={showModal}
  style={styles.modalContainer}
  customBackdrop={<CustomBackdrop />}
  onBackdropPress={() => setShowModal(false)}
  animationIn="fadeInDown"
  animationOut="fadeOutUp"
  // 新增属性，允许触摸事件透传
  pointerEvents="box-none"
>
  <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>

对应样式调整

const styles = StyleSheet.create({
  modalContainer: {
    margin: 0, // 移除react-native-modal默认的左右外边距
    justifyContent: 'flex-end', // 让Modal内容靠底部排列，不遮挡头部
  },
  // 其余原有样式保持不变
})

修改后下半部分的自定义背景点击关闭、Modal内部的选项点击功能不受影响，上层头部的图标也可以正常触发点击事件。

内容的提问来源于stack exchange，提问作者Sankomil