8

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

所以背景有一个全屏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
        });
    }
4

2 回答 2

2

我将从向您的 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，你可以有一个动画函数，将滚动视图向下动画到你想要的位置。我认为这看起来会更好，因为用户只需要简单的向下滑动即可折叠视图，这似乎是行业标准。

于 2017-10-02T03:03:07.350 回答
0

还有一个名为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>

例如，这可能看起来像这样：

ios截图

因此，地图被TouchThroughView将所有事件直接传递到后面的视图所覆盖。就我而言，这比使用pointer-events box-none效果更好。

于 2020-06-15T20:53:53.380 回答