React Native 滑出面板和滚动视图

Question

我正在开发一个带有本机反应的应用程序。我有这个 UI 元素，它类似于 iOS 中的 Maps，你从底部和里面滑动一个面板，有一个可滚动的列表。

对于滑出式面板，我使用了一个名为rn-sliding-up-panel. 它有几个道具作为事件监听器。例如

<SlidingUpPanel
  allowDragging={/*Boolean*/}
  onDragStart={()=>{}   /*When it is about to be dragged*/}
  onDrag={()=>{} /*When it is being dragged*/}
  onDragEnd={()={} /*When the user is no longer touching the screen*/}
></SlidingUpPanel>

在它里面，我有一个<ScrollView>包含一个<List>from react-native-elements。据我所知，它只有一个发泄监听器，是：

<ScrollView onScroll={()=>{}}></ScrollView>

---

我的问题是在列表上滚动实际上会导致面板关闭（它通过向下滑动关闭）。我通过添加一个状态并在滚动上修改它找到了一种解决方法：

state = {
  dragPanel: true,
}
/*===========================================*/
<SlidingUpPanel allowDragging={this.state.dragPanel}>
     <ScrollView onScroll={()={ this.setState({dragPanel: false}) }}></ScrollView>
</SlidingUpPanel>

但是，我找不到恢复拖动的方法，并且它的启动效率不高。

TL; 博士

有没有一种有效的方法可以在 SlidingUpPanel 内实现 ScrollView 而没有每个重叠的事件？也许使用类似的东西function(e){e.preventDefault();}？

Answer 1

要正确禁用/恢复外滚动拖动，请执行

_onGrant() {
  this.setState({ dragPanel: false });
  return true;
}

_onRelease() {
  this.setState({ dragPanel: true });
}

constructor(props) {
  super(props);

  this._onGrant = this._onGrant.bind(this);
  this._onRelease = this._onRelease.bind(this);

  this._panResponder = PanResponder.create({
    onMoveShouldSetPanResponder: this._onGrant,
    onPanResponderRelease: this._onRelease,
    onPanResponderTerminate: this._onRelease,
  });
}

render() {
  <SlidingUpPanel allowDragging={this.state.dragPanel}>
    <ScrollView
      {...this._panResponder.panHandlers}
    />
  </SlidingUpPanel>
}

从我一直在寻找了很长时间，preventDefault()是一个纯Web的JavaScript的事情，我觉得有没有preventDefault在反应母语。

从文档部分处理触摸，react-native只需使用 javascript 来模拟 Objc (iOS) 和 Java (Android) 事件。