web-dev-qa-db-ja.com

React NativeのAnimated.event（）でnativeEventコールバックを起動できないのはなぜですか？

ボックスがドラッグされたときに_Animated.event_呼び出しでnativeEventコールバックが起動しないのはなぜですか？

私の最終的な目標は、ドラッグ可能なジェスチャー制御コンポーネントが画面から消えないようにするロジックを実装することですが、目的のコールバックが起動されない理由を理解するまで、これを行うことはできません。

_<PanGestureHandler />_コンポーネントにonGestureEventコールバックを設定し、nativeEventコールバックを含むAnimated.event()呼び出しを渡します（ これを行う方法の例のドキュメント ）。

Animated.block()のdebugおよびconsole.log呼び出しがコンソールに何も出力していないため、nativeEventコールバックが起動していないことを知っています（Expo -- debug linkを使用して実行しています）ここ ）。また、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,
  },
})

_

ご協力ありがとうございました。

reactjsreact-nativeanimationreact-native-androidreact-native-gesture-handler
4
linqo

Animated from react-native-reanimatedを使用できます。

Animatedをreact-nativeからインポートすると、nativeEvent呼び出しが機能しないため

import React, { Component } from "react";
import { Dimensions, StyleSheet, Text, View, Button } from "react-native";
import { PanGestureHandler, State } from "react-native-gesture-handler";
import Animated from "react-native-reanimated";

const {
  and,
  block,
  clockRunning,
  set,
  Clock,
  cond,
  eq,
  debug,
  Extrapolate,
  max,
  lessThan,
  greaterOrEq,
  Value,
  startClock,
  timing,
  call,
  stopClock,
  event,
} = Animated;

function Slider({ color, width, height }) {
  const screenWidth = Dimensions.get("window").width;
  const _translateX = new 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 = event(
    [
      // Uncomment this block to see the original animation
      /*
            {
                nativeEvent: {translationX: _translateX}
            },
    */
      // Comment the following object when uncommenting the previous section
      {
        nativeEvent: ({ translationX: x, translationY: y, state }) =>
          block([
            // debug('x', _translateX),
            call([], () => console.log("the code block was executed")),
            set(_translateX, x),
          ]),
      },
    ],
    // ------------------------------
    {
        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.setValue(_lastOffset.x);
    }
  };

  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
Muhammad Numan