React Native 滑出面板和滚动视图

IT技术 javascript reactjs user-interface react-native
2021-05-12 01:06:02

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

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

<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();}？

3个回答

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

_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母语。

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

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

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

答案可能会迟到，但使用您的滚动视图作为绝对定位并相应地定位它。

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

其它你可能感兴趣的问题
上一篇绝对尺寸越小，相对尺寸误差越差 下一篇使用 React、Typescript 和 ES6 进行 Jest 测试