panresponder

clickアクション

 panResponderを使っってスワイプアクションを実装し、Animatedの内側(もしくは外側)にTouchableOpacityでクリックイベントを実装しようとした。

 しかし、panResponderの反応がよく、実機ではpanResponderの移動と判定されてクリックができない。

 そこで、PanResponderでClickイベントと実装することとした。

import {View, Text, StyleSheet, Animated, Dimensions, PanResponder , TouchableOpacity} from 'react-native';

・・・

    const panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => {
        console.log("onStartShouldSetPanResponder")
        this.startTime=new Date().getTime() // Click時
        console.log(this.startTime)
      },
      onPanResponderEnd: (evt, gestureState) =>{
        console.log("onPanResponderEnd") // Clickを終えたとき
        this.endTime=new Date().getTime()
        console.log("startTime")
        console.log(this.startTime)
        console.log("endTime")
        console.log(this.endTime)
        let diff = this.endTime - this.startTime
        console.log("diff")
        console.log(diff)
        if (diff < 100 ){  // 100ミリ以内ならクリックと判定
          console.log("Clicke");
          console.log(this.props.itemKey)
          this.props.handleItemClick(this.props.itemKey)
        }
      },