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

【问题标题】：Clickable Background underneath a ScrollView [React Native]ScrollView 下方的可点击背景 [React Native]
【发布时间】：2017-09-27 03:26:47
【问题描述】：

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

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

【问题讨论】：

您是否尝试过将pointerEvents: 'box-none' 传递给ScrollView 的样式？文档中的更多信息：facebook.github.io/react-native/docs/view.html#pointerevents
谢谢！这个我没试过。但这也会使 ScrollView 中的可见视图或子视图不可点击，我不希望这样。
来自我在之前评论中提供的链接：'box-none': The View is never the target of touch events but it's subviews can be.
好吧！在那种情况下会起作用，非常感谢。 :) 不幸的是，我不得不转向替代设计来跳过这个问题，但我们会再次回归。我会试试看。
我收到以下错误“pointerEvents 不是有效的样式属性”。由于我将其应用于 Scrollview 而您共享的链接具有它的视图。

标签： react-native react-native-android react-native-maps react-native-scrollview

【解决方案1】：

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

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

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

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

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

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

希望对你有帮助

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

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

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

【讨论】：

目前尝试了第一个解决方案，在向上滚动的情况下效果很好。怎么做才能使向下滚动折叠滚动视图？已更新上面尝试的解决方案。
另外，Accordions 也无法解决这个问题。因为背景地图需要可见。
你不只是反过来做同样的事情吗？这是一个很难在没有看到它运行的情况下回答的问题，但我会以两种方式之一处理向下滚动事件，我编辑了我的答案
我以类似的方式在上面写了甚至反转，但它挂起，因为如果到达顶部，滚动会阻碍向下滚动。我现在正在尝试以上两种方法。
你能用一些代码展示解决方案吗？因为当涉及到实际实施时，大多数事情都行不通。就像这里一样，当 yValue 发生变化时，即使找到正确的滚动方向也会中断。 contentOffset 作为参数也适用于 iOS。整个解决方案的简单代码 sn-p 将使事情更清楚..

【解决方案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 效果更好。

【讨论】：