Почему я не могу получить обратный вызов nativeEvent для запуска в React Native's Animated.event ()? - PullRequest
Новая
       75

Почему я не могу получить обратный вызов nativeEvent для запуска в React Native's Animated.event ()?

3 голосов
/ 02 мая 2020

Почему в моем вызове Animated.event не вызывается ответный вызов nativeEvent при перетаскивании поля?

Моя конечная цель - реализовать logi c, чтобы предотвратить перетаскивание управляемых жестами компонентов. за кадром, но я не могу этого сделать, пока не выясню, почему требуемый обратный вызов никогда не срабатывает.

Я устанавливаю обратный вызов onGestureEvent для компонента <PanGestureHandler /> и передаю ему Animated.event() вызов с nativeEvent обратным вызовом внутри него ( см. их документацию для примера того, как это сделать ).

Я знаю, что обратный вызов nativeEvent не запускается, потому что вызовы debug и console.log в Animated.block() ничего не выводят на консоль (я запускаю его с помощью Expo - debug ссылка здесь ). Кроме того, строка set(_translateX, translationX) в вызове Animate.block() также никогда не выполняется, в противном случае я мог бы ожидать перемещения ящиков при их перетаскивании (а не при отпускании касания).

Обратите внимание, что если Вы раскомментируете следующий блок и удаляете объект { nativeEvent: function... } сразу после него, анимация работает как положено: 

    {
      nativeEvent: {translationX: _translateX}
    },

Мне кажется, что я упускаю что-то очень простое, но я в растерянности выясните, что это такое.

Вот ссылка на Expo Expo для отладки: https://snack.expo.io/d8xCeHhtj

Вот мой код: 

import React, { Component } from 'react';
import {
  Dimensions,
  StyleSheet,
  Text,
  View,
  Button,
  Animated
} from 'react-native';
import {
  PanGestureHandler,
  ScrollView,
  State,
} from 'react-native-gesture-handler';
const {
  and,
  block,
  clockRunning,
  set,
  Clock,
  cond,
  eq,
  debug,
  Extrapolate,
  max,
  lessThan,
  greaterOrEq,
  Value,
  startClock,
  timing,
  call,
  stopClock,
} = Animated;

function Slider({color, width, height}) {
  const screenWidth = Dimensions.get('window').width;
  const _translateX = new Animated.Value(0);
  const _lastOffset = {x: 0};

  const cmpStyles = StyleSheet.create({
    box: {
      width: width,
      height: height,
      alignSelf: 'center',
      backgroundColor: color,
      margin: 30,
      zIndex: 200,
      color: color,
      transform: [
        {translateX: _translateX},
      ],
    },
  });

  const _onGestureEvent = Animated.event(
        [
  // Uncomment this block to see the original animation
    /*
            {
                nativeEvent: {translationX: _translateX}
            },
    */
  // Comment the following object when uncommenting the previous section
            {
                nativeEvent: function({ translationX, absoluteX }) {
                    return block([
                        debug('x', translationX),
                        call([], () => console.log('the code block was executed')),
                        set(_translateX, translationX),
                    ])
                }
            },
  // ------------------------------
        ],
        {
            useNativeDriver: true,
            listener: (event, gestureState) => {
                const {absoluteX, translationX} = event.nativeEvent;
                //console.log('translationX' + translationX);
                //console.log('dest' + _translateX._value);
            }
        }
  );
  const _onHandlerStateChange = event => {
    const {
      oldState,
      translationX,
      absoluteX,
    } = event.nativeEvent;
    if (oldState === State.ACTIVE) {
      //if (absoluteX + translationX > screenWidth) {
      //console.log("translationX: " + translationX);
      //console.log("screenWidth" + screenWidth);

      // Set the slider to correct position when gesture is released
      _lastOffset.x += translationX;
      _translateX.setOffset(_lastOffset.x);
      _translateX.setValue(0);
    }
  };

  return (
    <PanGestureHandler
      onGestureEvent={_onGestureEvent}
      onHandlerStateChange={_onHandlerStateChange}
            >
      <Animated.View style={cmpStyles.box} />
    </PanGestureHandler>
  );
}

export default function Example() {
  const width = 60;
  const height = 60;

  return (
    <View style={styles.scrollView}>
      <Slider color={'red'} width={width} height={height} />
      <Slider color={'blue'} width={width} height={height} />
      <Slider color={'green'} width={width} height={height} />
      <Slider color={'orange'} width={width} height={height} />
    </View>
  );
}

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    marginTop: 120,
  },
})

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 02 мая 2020

Напишите функцию-обработчик, например 

handleSctoll = (e) => {
   console.log(e.nativeEvent.contentOffset.y);
}

, и вы можете добавить прослушиватель следующим образом 

Animated.event(
   [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
   { listener: (event) => this.handleSctoll(event) }
)
...