在用于拖放单个列表项的 React Native 中，TouchableWithoutHighlight 无法在带有 {...panResponder.panHandlers} 的动画视图中工作

问题描述

我有一个项目列表，我可以通过长按选择任何列表项目并将其拖到图标上进行删除。我为此使用 PanResponder。现在在这部分中，长按触发功能的第一个关键步骤在某些设备中不会发生，而在某些设备中则不会发生。我认为问题是当通过 {...panResponder.panHandlers}

时，touchbales 在动画视图中似乎无法正常工作

  <Animated.View
      style={
        item.uuid === val &&
        (item.type === 'MESSAGE' || item.type === 'ATTACHMENT') &&
        (userDetails.uuid === item.actionedByUuid) &&
        !openChatBox &&
        moment(new Date(item.createdAt),'ddd MMM DD YYYY HH:mm:ss GMT Z').diff(Date.Now(),'minutes') <= 0 &&
        moment(new Date(item.createdAt),'minutes') >= -15
          ? {
              transform: [{ translateX: pan.x },{ translateY: pan.y }],// transform:[{scale:scale}],flex: 1,zIndex: 1000
            }
          : { flex: 1 }
      }
      {...panResponder.panHandlers}
    >
        <TouchableWithoutFeedback
        onLongPress={() => {
          (item.type === 'MESSAGE' || item.type === 'ATTACHMENT') && indexer(item)
        }}
      > 
        {element}
        <SizedBox height={24} />
    </TouchableWithoutFeedback>
    </Animated.View>

此特定代码映射数据数组，而 val 是我使用过的状态，并在索引器函数中设置，其中 val 包含项目索引号，这有助于选择单个列表项以进行拖放操作。

现在我面临的问题是这个没有反馈的 Touchable 在某些 android 设备中触发索引器功能，而在某些设备中根本不这样做。

当 {...panResponder.panHandler} 从 animation.view 中移除时，没有反馈的 Touchable 开始工作。 下面是我的锅处理程序：

const panResponder = PanResponder.create({
onMoveShouldSetPanResponder: () => true,onPanResponderGrant: () => {
  pan.setoffset({
    x: pan.x._value,y: pan.y._value
  })

  pan.setValue({ x: 0,y: 0 })
  setProceed('unactive')
},onPanResponderMove: Animated.event([null,{ dx: pan.x,dy: 
     pan.y }],{ useNativeDriver: false }),onPanResponderRelease: (e,gesture) => {
      setGesture(gesture)

  if (isDropZone(gesture)) {
    setopenConfirmation(true)
  } else if (proceed === 'unactive') {
    pan.flattenOffset()
    pan.setValue({ x: 0,y: 0 })

    Animated.spring(pan,{
      //This will make the draggable card back to its original position
      tovalue: 0
    }).start(() => {
      console.log('Not dropped Animation spring back')
    }),setStatus(false)
    setVal(-1)
    setScrollHandler(true)
  }
}

})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）