React Native滑出面板和滚动视图

Z时代
2024-01-10
分类：问答

我正在开发与本机反应的应用程序。我有一个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>

我的问题是，在列表上滚动实际上会导致面板关闭（通过向下滑动来关闭）。我通过添加状态并在onScroll上对其进行修改找到了解决方法：

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

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

TL; DR

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

回答：

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

_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>
}