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

所以，我想创建一个类似于下面的内容的布局。 [请参阅图像]ScrollView下的可点击背景[React Native]

所以背景有一个全屏MapView（反应本地地图）与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 
     }); 
    }

来源

2017-09-27 red-devil

您是否尝试过将'pointerEvents：'box-none''传递给ScrollView的样式？更多信息在文档中：https：//facebook.github.io/react-native/docs/view.html#pointerevents –

谢谢！我没有试过这个。但是这也会使ScrollView中的可见或者子视图变成不可点击的，我不想这样做。 –

从我之前的评论中提供的链接：''box-none'：视图从来不是触摸事件的目标，但它的子视图可以.' –

我会与添加绝对定位到您的滚动型开始，（position: absolute）开始在任何y协调后你想。我会做这个的y值的状态，如

yValue: new Animated.Value(start_value)或者干脆yValue: start_value

然后我会用滚动型的道具onScroll事件处理协调这一y中的变化，例如，用于滚动的第一个100个像素的它只需更改yValue而不是滚动视图。

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

注意：您还需要这样做折叠滚动视图。

注2：如果不给你你要找的，我会建议寻找到使用某种此任务可折叠组件的结果，例如https://github.com/oblador/react-native-collapsible

希望这有助于

编辑：要崩溃，你可以首先确定滚动视图如果滚动方向是向下的（我认为你已通过upwardScroll完成），然后..

1）无论是简单的添加内容偏移到您的y值

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

来源

2017-10-02 03:03:07

现在尝试第一个解决方案，它在向上滚动的情况下运行良好。如何使滚动视图向下滚动折叠？已更新上面尝试的解决方案。 –

另外，Accordions不会解决这个问题。由于背景地图需要可见。 –

你不只是做相同的事情吗？这是一个很难回答的问题，但没有看到它运行，但我会以两种方式之一处理向下滚动事件，我编辑了我的答案 –

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

回答

相关问题