ボックスがドラッグされたときに_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,
},
})
_
ご協力ありがとうございました。
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,
},
});