时间戳

首页 > 解决方案 > 绝对位置下的可触摸无法在 IOS 上运行，但在 Android 上运行良好

javascript - 绝对位置下的可触摸无法在 IOS 上运行，但在 Android 上运行良好

问题描述

我有包含一些可触摸的 ScrollView，在下面我有包含通知的单独组件。

<ScrollView style={styles.scroll}>
   //some touchables
</ScrollView>
<Notifications />

通知的高度为 50px 并且是可拖动的，就像 android 或 ios 上的通知一样，当您将它们拉下时，它们会越过滚动视图，当您向上滑动它们时，滚动视图会再次出现。

问题是，当通知不在向下位置时，在android（真实设备）上，我可以单击滚动视图中的可触摸对象，一切正常，但是在ios模拟器上，您可以滑动通知，但不能单击内部的可触摸对象当通知处于向上位置时滚动视图。

我尝试将滚动视图 zIndex 设置为 1，然后我可以单击可触摸对象，但是当我向下滑动通知时，它们会位于滚动视图下方。

谁能建议我一些解决方案？

scroll: {
    width: '100%',
    paddingHorizontal: '2%',
    marginTop: 50,
  },

通知容器如下所示：

panelContainer: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  },

标签： javascriptreactjsreact-native

解决方案

尽管我花了几个小时试图找到解决方案，但我想我是在发布这个问题后才找到的。

解决方案是添加pointerEvents="box-none"到绝对定位的视图中。现在它可以在 Android 和 IOS 上正常工作。

推荐阅读