javascript - 使用 panresponder 在按钮点击上刷卡

Question

我正在尝试制作一个类似于 tinder 的应用程序组件来刷卡，当我用手指刷卡时它工作正常，但是，我也想在按钮单击时实现相同的效果。到目前为止，我已经使用 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, 0, 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, 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.dy < -120 || gestureState.dy > 120) {
                  this.isPanDisabled = false
                }
                else {
                  this.isPanDisabled = true
                  Animated.spring(this.position, {
                    toValue: { x: 0, y: 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', alignContent: 'center', alignItems: 'center' }}>
        <TouchableOpacity
          onPress={() => this.swipeLeft()}
          style={{
            justifyContent: 'center',
            height: 60,
            width: 60,
            borderRadius: 60 >> 1,
            backgroundColor: 'gray',
            alignContent: 'center',
            alignItems: 'center'
          }}>
          <Text>Left</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => this.swipeRight()}
          style={{
            justifyContent: 'center',
            height: 60, width: 60, borderRadius: 60 >> 1,
            backgroundColor: 'gray',
            alignContent: 'center', alignItems: 'center'
          }}>
          <Text>Right</Text>
        </TouchableOpacity>
      </View>
    </View>

  </SafeAreaView>
)

}

我想做一个this.swipeRight()可以刷卡的功能，就像我用手指刷卡一样，我尝试过创建一个类似的功能，但它只是立即移除最上面的卡，然后它停止工作

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

}

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