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

Question

所以，我想创建一个类似于下面的布局。 [引用图片]

所以背景有一个全屏MapView (React Native Maps) 与 Markers在它上面，它需要是可点击的。

还有一个Scrollview全屏高度超过 MapView它最初有一些与其内容相关的上边距。

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

<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

我首先为您的 ScrollView 添加绝对定位，( position: absolute )从 y 开始协调你想要的。我会让这个 y 值成为一个状态，例如
yValue: new Animated.Value(start_value)或者干脆 yValue: start_value
然后我会使用 ScrollView 的 Prop onScroll事件来处理这个 y 坐标的变化，例如对于滚动的前 100 个像素，它只会改变 yValue而不是 ScrollView 。

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

注意:您还需要这样做来折叠 ScrollView 。

注意2:如果这没有给你你想要的结果，我建议考虑使用某种可折叠组件来完成这个任务，例如 https://github.com/oblador/react-native-collapsible

希望这可以帮助

编辑 :要折叠 ScrollView ，您可以首先确定滚动方向是否向下(我认为您已经通过 upwardScroll 完成)然后..

1) 要么简单地将内容偏移量添加到您的 yValue

2) 如果您使用 Animated.Value为 yValue ，您可以使用动画功能将 ScrollView 向下移动到您想要的位置。我认为这看起来会更好，因为用户只需要一个简单的向下轻弹即可折叠 View ，这似乎是行业标准。