Panresponder 滑动无法点击按钮

问题描述

我正在尝试制作一个类似火种的应用程序组件来刷卡，当我用手指刷卡时它工作正常，但是，我也想在单击按钮时实现相同的效果。到目前为止，我已经使用 Panresponder 来创建滑动动作，下面是我的代码

render() {
return (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={{ flex: 1,justifyContent: 'center',alignContent: 'center',alignItems: 'center',backgroundColor: 'white' }}>
      <View style={{
        height: Dimensions.get('window').height * .75,borderRadius: 5,width: Dimensions.get('window').width * .75,}}>
        {
          this.state.ARRAY.map((item,index) => {
            this.position = new Animated.ValueXY()
            this.rotate = this.position.x.interpolate({
              inputRange: [-CONST_WIDTH / 2,CONST_WIDTH / 2],outputRange: ['-30deg','0deg','10deg'],extrapolate: 'clamp'
            })

            this.rotateAndTranslate = {
              transform: [{
                rotate: this.rotate
              },...this.position.getTranslateTransform()
              ]
            }
            this.isPandisabled = true
            this.PanResponder = PanResponder.create({

              onStartShouldSetPanResponder: (evt,gestureState) => this.isPandisabled,onPanResponderMove: (evt,gestureState) => {
                this.position.setValue({ x: gestureState.dx,y: 0 })
              },onPanResponderRelease: (evt,gestureState) => {

                if (gestureState.dx > 120) {
                  this.isPandisabled = true
                  // console.log('dxgreaterThan120',gestureState.dx)
                  Animated.spring(this.position,{
                    tovalue: { x: CONST_WIDTH + 100,y: 0 },useNativeDriver: Platform.OS === 'android'
                  }).start(() => {
                    let modified = this.state.ARRAY.filter((x,ind) => { return ind != index })
                    console.log('modified',modified)
                    this.setState({ ARRAY: modified })
                  })
                }
                else if (gestureState.dx < -120) {
                  this.isPandisabled = true
                  Animated.spring(this.position,{
                    tovalue: { x: -CONST_WIDTH - 150,modified)
                    this.setState({ ARRAY: modified })
                  })
                }
                else if (gestureState.dy < -120 || gestureState.dy > 120) {
                  this.isPandisabled = false
                }
                else {
                  this.isPandisabled = true
                  Animated.spring(this.position,{
                    tovalue: { x: 0,friction: 4,useNativeDriver: Platform.OS === 'android'
                  }).start()
                }
              }
            })
            return (
              <Animated.View
                key={index}
                {...this.PanResponder.panHandlers}
                style={[this.rotateAndTranslate,{
                  borderRadius: 5,backgroundColor: color[index],position: 'absolute',top: 0,bottom: 0,left: 0,right: 0,}]}>
                <Animated.ScrollView
                  onScrollEndDrag={() => {
                    this.isPandisabled = true
                  }}>
                  <View style={{ flex: 1,flexGrow: 1 }}>
                    {
                      ARRAY_SUUMB.map((item,index) => {
                        return (
                          <Text style={{
                            padding: 16,color: 'white'
                          }}>
                            Swiper
                          </Text>
                        )
                      })
                    }
                  </View>
                </Animated.ScrollView>

              </Animated.View>
            )
          })
        }
      </View>
      <View style={{ justifyContent: 'center',flexDirection: 'row',alignItems: 'center' }}>
        <TouchableOpacity
          onPress={() => this.swipeLeft()}
          style={{
            justifyContent: 'center',height: 60,width: 60,borderRadius: 60 >> 1,backgroundColor: 'gray',alignItems: 'center'
          }}>
          <Text>Left</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => this.swipeRight()}
          style={{
            justifyContent: 'center',alignItems: 'center'
          }}>
          <Text>Right</Text>
        </TouchableOpacity>
      </View>
    </View>

  </SafeAreaView>
)

}

我想做一个功能this.swipeRight()，我可以像用手指刷卡一样刷卡，我尝试创建一个类似的功能，但它只是立即删除了顶部卡片，然后它停止工作

  swipeRight = () => {
this.position.setValue({ x: Dimensions.get('screen').width * 1.5,() => {
  this.isPandisabled = true
  Animated.spring(this.position,{
    tovalue: { x: CONST_WIDTH + 100,useNativeDriver: Platform.OS === 'android'
  }).start()
  let modified = this.state.ARRAY.splice(0,-1)
  console.log('modified',modified)
  this.setState({ ARRAY: modified })
})

}

任何帮助将不胜感激，我在地图功能中有 panresponder

解决方法

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

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

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