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

Question

所以，我想创建一个类似于下面的布局。 [参考图像]

因此背景有一个全屏MapView（React Native Maps），其上有Markers，需要点击。

Scrollview全屏高度超过MapView，最初有一些与其内容关联的上边距。

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

<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
        });
    }

Answer 1

我首先从您想要的position: absolute坐标开始向ScrollView添加绝对定位（y）。我会把这个y值设为一个状态，例如

yValue: new Animated.Value(start_value)或只是yValue: start_value

然后我会使用ScrollView的prop onScroll事件来处理这个y坐标的变化，例如对于滚动的前100个像素，它只会更改yValue而不是滚动视图。

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

注意：您还需要执行此操作来折叠scrollview。

注意2：如果这不能提供您所寻找的结果，我建议使用某种可折叠组件来完成此任务，例如https://github.com/oblador/react-native-collapsible

希望这有帮助

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

1）只需将内容偏移量添加到yValue

即可

2）如果您使用Animated.Value作为yValue，则可以使用动画功能将滚动视图向下动画到所需位置。我认为这会更好看，因为用户只需要一个简单的向下轻弹来折叠视图，这似乎是行业标准。

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更好。