反应本机滑出面板和滚动浏览

Question

我正在开发一个具有React Antial的应用程序。我有这个UI元素，类似于iOS中的地图，其中您从底部和内部滑动一个面板，有一个可滚动的列表。

对于滑出面板，我正在使用一个称为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>，其中包含来自react-native-elements的<List>。据我所知，它只有一个通风口的听众，是：

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

---

我的问题是，在列表上滚动实际上会导致面板关闭（通过滑动来关闭）。我通过添加一个状态找到了一个工作，并将其换成croll：

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

但是，我找不到恢复拖动的方法，并且不会有效地启动。

tl; dr

是否有一种令人难以置信的方法可以在不重叠的事件的情况下实现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的东西，我认为 React-native-native 。。

中没有preventDefault

从文档部分处理触摸中， react-native 只需使用JavaScript即可模拟OBJC（ios）＆amp;Java（Android）事件。

Answer 2

将最小限度的属性设置为约50个物业。小屏幕可能30个，而较大的屏幕为50-60。这样做：

<SlidingUpPanel minimumDistanceThreshold={isSmallScreen ? 30 : 50}>
  <ScrollView style={{flex: 1}}>
  </ScrollView> 
</SlidingUpPanel>

Answer 3

答案可能迟到了，但是将滚动视图作为绝对定位并相应地定位。

将滚动视图视为出现在其后面背景前面的弹出对话框。单击背景后，弹出窗口就会解散。通过在滑动面板前面放置滚动视图，将类似的逻辑应用到问题上。