猫型iPS細胞研究所

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== panresponder ======



===== clickアクション ======




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

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

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

<code>
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)
        }
      },
</code>

猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

ページ用ツール