React native: показывать количество касаний с помощью PanResponder - PullRequest
Новая
       106

React native: показывать количество касаний с помощью PanResponder

0 голосов
/ 11 июля 2020

Я хочу показать количество активных касаний при перетаскивании.

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

Пожалуйста, проверьте мой код ниже: 

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

import styles from './assets/Styles';

var width = Dimensions.get('window').width;

export default class Three extends Component {
  constructor(props) {
    super(props);

    this.state = {
      touchesCount: 0,
    };
  }

  setTouches(count) {
    this.setState({
      touchesCount: count,
    });
  }

  makeDraggableItem(bgColor) {
    if (!bgColor) {
      bgColor = '#14b94c';
    }

    //animated events
    const pan = new Animated.ValueXY();
    const mover = Animated.event([
      null,
      {
        dx: pan.x,
        dy: pan.y,
      },
    ]);

    const panResponder = PanResponder.create({
      onMoveShouldSetPanResponder: () => true,

      onPanResponderGrant: () => {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value,
        });
      },

      onPanResponderMove: (e, gestureState) => {
        this.setTouches(gestureState.numberActiveTouches); //without this line, the drag is working
        return mover(e, gestureState);
      },

      onPanResponderRelease: () => {
        pan.flattenOffset();
        Animated.spring(pan, {toValue: {x: 0, y: 0}}).start();
        this.setTouches(0); //without this line, the drag is working
      },
    });

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

  renderTouches() {
    return (
      <Text style={{padding: 10}}>
        Active touches: {this.state.touchesCount}
      </Text>
    );
  }

  draggable() {
    return (
      <View style={styles.container}>
        {this.renderTouches()}
        <View style={(styles.viewBox, styles.viewBoxBig)}>
          <View>
            <View style={styles.justifyBetween}>
              {this.makeDraggableItem('#F64E60')}
            </View>
          </View>
        </View>
      </View>
    );
  }

  render() {
    return this.draggable();
  }
}

Если я не добавлю код обновления внутри onPanResponderMove() и onPanResponderRelease() перетаскивание работает. Но я не могу подсчитать количество касаний.

Я использую React Native версии 0.62.2

Ссылка на то, что я использую,

https://reactnative.dev/docs/panresponder

https://reactnative.dev/docs/animated

Нужна помощь. Заранее спасибо.

...