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

我首先向 ScrollView 添加绝对定位，( ) 从您想要的position: absolute任何坐标开始。y我会让这个 y 值成为一个状态，例如

yValue: new Animated.Value(start_value)或者简单地yValue: start_value

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

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

注意：您还需要执行此操作才能折叠滚动视图。

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

希望这可以帮助

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

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

2）如果你使用Animated.Valuefor yValue，你可以有一个动画函数，将滚动视图向下移动到你想要的位置。我认为这看起来会更好，因为用户只需要简单地向下滑动即可折叠视图，这似乎是行业标准。