时间戳

首页 > 解决方案 > 反应本机：在android上损坏的滚动视图内使用panResponder

android - 反应本机：在android上损坏的滚动视图内使用panResponder

问题描述

我知道这个问题已被多次提出，但我还没有找到任何其他线程的有效修复（其中大多数几乎没有回复）。

在我的实现中，我有一个 ScrollView，它是一个项目列表的父项，每个项目都有一个 panResponder 用于横向滑动（如火种卡）。

我遇到的问题是 ScrollView 停止 panResponder 中间动画并优先考虑滚动。

我尝试过动态切换滚动scrollEnabled视图onPanResponderGrant，onPanResponderRelease但这不是一个可行的解决方案，因为在 panResponder 上垂直滚动会触发onPanResponderGrant禁用滚动。

这是我的实现panResponder：

this._panResponder = PanResponder.create({
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
        onMoveShouldSetPanResponder: (evt, gestureState) => false,
        onMoveShouldSetPanResponderCapture: (evt, gestureState) => false,
        onShouldBlockNativeResponder: (evt, gestureState) => false,
        onPanResponderTerminationRequest: () => false,
        onPanResponderGrant: (event, gestureState) => {
          this.pan.setValue(0);
          this.opacity.setValue(0)
          this.rotation.setValue(0)
        },
        onPanResponderMove: (event, gesture) => {
            this.pan.setValue(gesture.dx)
            this.rotation.setValue(gesture.dx)
            this.opacity.setValue(gesture.dx)
          },  
        onPanResponderRelease: (event, gestureState) => {
            if(gestureState.dx < -SWIPE_THRESHOLD){
                this.removeCard()
              } else {
                this.resetPosition()
              }
        }
      });

这是呈现每张可刷卡的 FlatList：

 <FlatList
            data={this.state.cards}
            keyExtractor={item => item.id}
            renderItem={({ item }) => (
              <DataCard
              type={item.type}
              name={item.name}
              />
            )}
          />

从那以后，我换了ScrollView一个FlatList，希望能神奇地解决这个问题，但没有运气。

此功能在 iOS 上完美运行，但问题仍然是 android。

似乎这是一个非常普遍的问题，没有具体的解决方案。这就是我希望通过发布这个。

谢谢！

标签： androidreact-native

解决方案

我知道已经很晚了，但我希望这个答案能帮助像我一样遇到同样问题的其他人。 当两个不同的父组件试图停止你的动画时，看起来 PanResponder 不能很好地支持（在这种情况下，你在 ScrollView 中有一个 FlatList）

对我有用的解决方案是将 FlatList 的 scrollEnabled 设置为 false（当您在另一个滚动视图中时它仍然可以工作）这样平移响应器将不得不只处理 ScrollView

另外 - 不要忘记设置“onPanResponderTerminate()”以让组件返回到初始位置并将 scrollable=true 返还给父组件（ScrollView），如下所示：

  onPanResponderTerminate: () => {
    this.props.changeScrollable(true);
    this.resetPosition();
  },

我真的希望这足够清楚，这将有助于某人！

推荐阅读