Как посчитать, сколько времени я прокручиваю в panResponder? - PullRequest
0 голосов
/ 13 июля 2020

Я создал поле в react native.

Я хочу показать предупреждение, сколько времени я смахиваю поле. Как это:

Предупреждение: вы проводите пальцем 1/2/3 se c.

Вот мой код:

import React, {useRef} from 'react';
import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';

const App = () => {
  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value,
        });
      },
      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}], {
        useNativeDriver: false,
      }),
      onPanResponderRelease: () => {
        pan.flattenOffset();
      },
    }),
  ).current;

  return (
    <View style={styles.container}>
      <Animated.View
        style={{
          transform: [{translateX: pan.x}, {translateY: pan.y}],
        }}
        {...panResponder.panHandlers}>
        <View style={styles.box} />
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  box: {
    height: 170,
    width: 170,
    backgroundColor: '#9370db',
    marginRight: 10,
    borderRadius: 25,
  },
});

export default App;

введите описание изображения здесь

На самом деле, я хочу, чтобы после прокрутки этого поля отображалось предупреждение, сколько времени я прокручиваю.

Пожалуйста, помогите!

...