向上拖动ScrollView，然后在React Native中继续滚动 [英] Drag up a ScrollView then continue scroll in React Native

问题描述

这是关于(我要达到的目标的)(降低质量的)GIF.

Here is a (quality-reduced) GIF about what I'm want to achieve.

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

I have a scrollview, that is positioned at the half of my screen.

我想要的是将scrollview向上拖动，然后在到达某个位置时将drag touch event发送到scrollview本身，以便它可以继续滚动.

What I want is to drag that scrollview up, and then, when it reaches a certain position, send the drag touch event to scrollview itself, so it can continue scrolling.

• 将滚动视图全屏显示在前景中，并在其contentContainerStyle中添加一个半屏填充.效果很好，但是我无法单击它后面的视图.有没有办法点击滚动视图的空白区域?

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

• Put the scrollview in fullscreen in the foreground, and add a half-screen padding-top to its contentContainerStyle. It worked well, but I couldn't click the view behind it. Is there a way to click through the empty area of a scrollview?

• I also tried to detect the scroll position, in order to move the view up accordingly

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

，但是当我在iOS模拟器上对其进行测试时却无法正常工作.事件甚至没有触发. 反应本机文档指出onScroll需要scrollEventThrottle才能工作.但是，scrollEventThrottle仅在iOS上可用.就我而言，我也想在Android上使用它.
而且，如果我成功实现了这一目标，那么我将面临另一个UI问题:向上拖动ScrollView时，如何在视图尚未位于所需位置的情况下阻止它滚动?

but didn't work when I tested it out on iOS simulator. Event is not even fired. React Native Docs states that onScroll needs scrollEventThrottle to work. However, scrollEventThrottle is only available on iOS. And in my case, I want it on Android too.
And If I successfully achieve this, I should face another UI problem: When dragging the ScrollView up, how can I prevent it to scroll when the view is not yet at the wanted position?

那么，能否请您给我一些实现此目标的提示:)?

So, can you give me some tips to achieve this please:)?

谢谢

推荐答案

我尝试了几种选择.这是我的性能最佳的解决方案.当然，这只是一个可行的示例，您可能需要进一步优化它以完全满足您的需求.

I've tried several options. This is my solution which works best performance-wise. Of course this is just a working example, you might need to optimize it a little bit further to perfectly match your needs.

基本思想是将地图始终保持在叠加层的背景中.叠加层已完全定位，并且包含两个视图.一个View是透明的，我们仍然可以在其中查看和控制地图，另一个View包含实际的ScrollView.诀窍是设置父叠加层的pointerEvents="box-none"，并在要与地图进行交互的View的pointerEvents="none"中禁用指标事件.

The basic idea is to keep the map all the time in the background of the overlay. The overlay is absolutely positioned and contains two Views. One View is transparent, where we can still see and control the map, the other View contains the actual ScrollView. The trick is to set pointerEvents="box-none" of the parent overlay and disable pointerEvents with pointerEvents="none" of View where we want to interact with the map.

基本渲染方法:

  <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方法.参见下面的代码和注释:

If we scroll down the ScrollView we want to shrink the empty View, so that the ScrollView becomes fullscreen. Therefore we listen to the onScroll method of the ScrollView. See code and comments below:

  _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方法的调用频率. (在这里您可能需要微调)

With ScrollView's scrollEventThrottle prop we can control how often the _onScroll method should be called. (Here you probably have to fine tune)

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

这篇关于向上拖动ScrollView，然后在React Native中继续滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！