Question

我正在开发一个带有本机的应用程序。我有这个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>包含来自<List>的{{1}}。据我所知，它只有一个发泄听众，是：

react-native-elements

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

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

然而，我找不到恢复拖动的方法，并且它没有有效地启动。

TL; DR

是否有一种有效的方法在SlidingUpPanel内部实现ScrollView而没有每个重叠的事件？也许使用与state = { dragPanel: true, } /*===========================================*/ <SlidingUpPanel allowDragging={this.state.dragPanel}> <ScrollView onScroll={()={ this.setState({dragPanel: false}) }}></ScrollView> </SlidingUpPanel>类似的东西？

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 中没有preventDefault。< / p>

从文档部分Handling Touches， react-native 只需使用javascript来模拟Objc（iOS）＆amp; Java（Android）事件。

Answer 2

将minimumDistanceThreshold属性设置为50左右。小屏幕可能为30，大屏幕可能为50-60。这样做：

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

Answer 3

答案可能为时已晚，但是将滚动视图用作绝对位置并相应地定位它。

将滚动视图视为弹出对话框，出现在其背后的背景前面。单击背景后，弹出窗口消失。通过在向上滑动面板的前面滚动视图，对问题应用类似的逻辑。

React Native滑出面板和scrollview

3 个答案: