React Native 滑出面板和滚动视图 [英] React Native slide out panel and scrollview

问题描述

我正在使用 React Native 开发一个应用程序.我有这个 UI 元素，它类似于 iOS 中的 Maps，你从底部滑动一个面板，在它里面有一个可滚动的列表.

I am developing an app with react native. I have this UI element which is similar to that of Maps in iOS, in which you slide a panel from the bottom and inside it, there is a scrollable list.

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

For the slide-out panel, I am using a component called rn-sliding-up-panel. It has several props as event listeners. For example

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

在它里面，我有一个 包含来自 react-native-elements 的 .据我所知，它只有一个发泄监听器，是:

Inside it, I have a <ScrollView> containing a <List> from react-native-elements. As far as I know, it has only one vent listener, being:

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

<小时>

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

---

My issue is that scrolling on the list actually causes the panel to close (it closes by sliding down). I found a work-around by adding a state, and modfiying it onScroll:

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

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

However, I cannot find a way to restore the dragging, and it doesn't fire up as efficiently.

TL;博士

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

Is there an eficient way to implement a ScrollView inside a SlidingUpPanel without the events of each overlapping? Maybe using something similar to function(e){e.preventDefault();}?

推荐答案

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

To properly disable / restore outer scroll dragging, do

_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 中没有 preventDefault-原生.

From what I had been searching for a long time, preventDefault() is a pure web-javascript thing, I think there are no preventDefault in react-native.

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

From document section Handling Touches, react-native just use javascript to simulate Objc (iOS) & Java (Android) events.

这篇关于React Native 滑出面板和滚动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！