reactjs - 向上拖动 ScrollView，然后在 React Native 中继续滚动

Question

我想要什么(GIF)

这是一个关于我想要实现的目标的(质量降低的)GIF。

我想要什么(文本)

我有一个 scrollview，位于屏幕的一半。

我想要的是将 scrollview 向上拖动，然后当它到达某个位置时，将 drag touch 事件发送到 scrollview > 本身，这样它就可以继续滚动。

我的尝试

• 将 ScrollView 置于前台全屏，并为其 contentContainerStyle 添加半屏 padding-top。它运行良好，但我无法单击它后面的 View 。有没有办法点击 ScrollView 的空白区域？

• 我还尝试检测滚动位置，以便相应地向上移动 View

  <ScrollView onScroll={event => moveScrollViewUpIfNeeded(event)}>
      ...
  </ScrollView>
  

  但是当我在iOS模拟器上测试它时不起作用。事件甚至没有被触发。 React Native Docs指出 onScroll 需要 scrollEventThrottle 才能工作。但是，scrollEventThrottle 只是 available on iOS 。就我而言，我也想在 Android 上使用它。
  如果我成功实现了这一点，我应该面临另一个 UI 问题:向上拖动 ScrollView 时，当 View 尚未到达所需位置时，如何防止它滚动？

那么，您能给我一些实现此目标的提示吗:)？

谢谢，

Answer 1

我尝试了几种选择。这是我的解决方案，在性能方面效果最好。当然，这只是一个工作示例，您可能需要进一步优化它以完全满足您的需求。

演示:

说明:

基本思想是让 map 始终保持在叠加层的背景中。覆盖层是绝对定位的并且包含两个 View 。一个View是透明的，我们仍然可以看到和控制 map ，另一个View包含实际的ScrollView。诀窍是设置父叠加层的 pointerEvents="box-none" 并使用我们想要与 map 交互的 View 的 pointerEvents="none" 禁用pointerEvents。

基本渲染方法:

  <SafeAreaView style={{flex: 1}}>
     <MapView
      initialRegion={region}
      style={{height: HEIGHT, width: WIDTH}}
      /> 
    <View  pointerEvents="box-none"style={{height: HEIGHT, width: WIDTH, position: 'absolute'}}>
      <View pointerEvents="none" style={{height: this.state.height, backgroundColor: 'transparent'}} />
      <View style={{ height: HEIGHT-this.state.height, backgroundColor: 'white'}}>
        <ScrollView onScroll={(e) => this._onScroll(e)} scrollEventThrottle={10} >
        -- content of scrollview goes here --- 
        </ScrollView>
      </View>
    </View>

  </SafeAreaView>

滚动功能:

如果我们向下滚动 ScrollView，我们想要缩小空 View，以便 ScrollView 变为全屏。因此我们监听 ScrollView 的 onScroll 方法。请参阅下面的代码和注释:

  _onScroll(e){
    // from the nativeEvent we can get the contentOffsett
    var offset_y = e.nativeEvent.contentOffset.y;
    if (offset_y > 0 ) {
     if (this.state.height>=0){
      // we are scrolling down the list, decrease height of the empty view
      this.setState({height: this.state.height-offset_y});
     }
    }
    if (offset_y <0){
      if (this.state.height <= this.state.mapHeight){
        // we are scrolling up the list, increase size of empty view/map view 
        this.setState({height: this.state.height-offset_y});
      }
    }
  }

通过 ScrollView 的 scrollEventThrottle 属性，我们可以控制 _onScroll 方法的调用频率。 (这里你可能需要微调)

完整代码和工作小吃

https://snack.expo.io/@tim1717/rnmapwithoverlay