可以点击的ScrollView背景 [React Native]

Question

因此，我想创建一个类似下面所示的布局。【参考图片】

因此，背景具有全屏MapView（React Native Maps），上面有Markers，需要可点击。

并且在MapView上方有一个全屏高度的Scrollview，最初其内容与一些顶部边距相关联。

但问题在于，如果我以这种方式排列我的视图，则地图上的标记在初始状态下是不可点击的。

<View>
  <MapView>
    <Marker clickEventHere></Marker>
    <Marker clickEventHere></Marker>
  </MapView>
  <ScrollView fullscreen>
     <View marginTop></View>
  </ScrollView>
<View>

我不确定是否真的可以解决这个问题。

初始状态

滚动后

尝试的解决方案

yScrolled = event.nativeEvent.contentOffset.y;
yValue = this.state.yValue - yScrolled;

upwardScroll = yScrolled > 0;

if(upwardScroll && (yValue > 0)){
  this.setState({
    yValue: yValue
  });
}


if(yScrolled === 0){
  yScrolled = -10;
}
if(!upwardScroll && (yValue <= scrollViewMarginTop)){
  yValue = this.state.yValue - yScrolled;
  console.debug("UPDATE DOWNWARD");
  this.setState({
    yValue: yValue
  });
}

- red-devil

---

你尝试过将 pointerEvents: 'box-none' 传递给 ScrollView 的样式吗？更多信息请参阅文档：https://facebook.github.io/react-native/docs/view.html#pointerevents - Mateo Hrastnik

谢谢！我还没有尝试过这个。但是这也会使得ScrollView内可见或子视图无法被点击，我不想要这样。 - red-devil

从我之前评论中提供的链接中：'box-none': 视图永远不是触摸事件的目标，但它的子视图可以是。 - Mateo Hrastnik

好的！那样做应该可以，非常感谢。 不幸的是，我不得不采用另一种设计来避免这个问题，但我们会再回到原来的设计。我会试一下。 - red-devil

我遇到了以下错误：“pointerEvents不是有效的样式属性”。因为我将其应用于Scrollview，而您分享的链接是针对View。 - red-devil

Answer 1

我建议您先将绝对定位添加到ScrollView中（position：absolute），从您想要的任何y坐标开始。我会将此y值设置为状态，例如：yValue：new Animated.Value（start_value）或简单地 yValue：start_value。

然后，我将使用ScrollView的onScroll事件处理此y坐标的更改，例如，在滚动的前100个像素中，它将仅更改而不是滚动视图。

这应该使您能够按下父视图中的标记，并使用您提供的相同组件结构。

注意：您还需要对滚动视图进行折叠操作。

注意2：如果这不能给您想要的结果，建议尝试使用某种可折叠组件，例如https://github.com/oblador/react-native-collapsible 希望这可以帮助您

编辑：要折叠滚动视图，您可以首先确定滚动方向是否向下（我认为您已经通过upwardScroll完成了），然后...

1）只需将内容偏移添加到您的即可。

2）如果您为使用了Animated.Value，则可以有一个动画函数，将滚动视图向下动画到所需位置。我认为这看起来更好，因为用户只需要简单地向下轻扫即可折叠视图，这似乎是行业标准。

- Ryan Turnbull

---

目前尝试了第一种解决方案，在向上滚动的情况下效果很好。如何让向下滚动折叠滚动视图？已更新上述尝试的解决方案。 - red-devil

此外，手风琴也无法解决这个问题。因为背景地图需要保持可见。 - red-devil

你不只是反过来做同样的事情吗？这是一个很难回答的问题，没有看到它运行，但我会用两种方式处理向下滚动事件，我已经编辑了我的答案。 - Ryan Turnbull

我以类似的方式编写了反向的偶数，但是当到达顶部时，它会挂起，因为滚动会阻止向下滚动。我现在正在尝试上述两种方法。 - red-devil

你能否展示一些代码来解决这个问题吗？因为在实际实现时，大多数东西都不起作用。就像在这里，即使是在yValue发生变化时找到正确的滚动方向也会出现问题。另外，contentOffset作为参数仅适用于iOS。一个简单的代码片段可以使事情更清晰。 - red-devil

嘿@red-devil，你找到解决方案了吗？我也遇到了同样的问题。你能分享一些代码吗？ - Himanshu G

Answer 2

还有一个名为react-native-touch-through-view的库可以帮助你实现这个功能。它的基本工作原理如下：

<View style={{ flex: 1 }}>
    // Your map goes here
</View>
<TouchThroughWrapper style={{
    position: 'absolute'',
    top:      0,
    left:     0,
    width:    '100%',
    height:   '100%',
}}>
    <ScrollView
        style={{
            backgroundColor: 'transparent',
            position:        'absolute',
            top:             0,
            left:            0,
            width:           '100%',
            height:          '100%',
            // Maybe in your case is flex: 1 enough
        }}
        bounces={false}
        showsVerticalScrollIndicator={false}
    >
        <TouchThroughView 
            style={{
                height: 400, // This is the "initial space" to the top
            }} 
        />
        // The "slide up stuff" goes here
    </ScrollView>
</TouchThroughWrapper>

例如，这样看起来就像这样：

因此，地图被 TouchThroughView 覆盖，它将所有事件直接传递到后面的视图。在我的情况下，这比使用 pointer-events box-none 更好。

- Thomas Kekeisen