为什么拖动框时nativeEvent我的调用中没有触发回调？Animated.event
我的最终目标是实现逻辑以防止可拖动的手势控制组件离开屏幕，但我无法做到这一点，直到我弄清楚为什么所需的回调永远不会触发。
我为一个组件设置了一个onGestureEvent回调，并在其中传递了一个带有回调的调用（有关如何执行此操作的示例，请参见他们的文档）。<PanGestureHandler />Animated.event()nativeEvent
我知道 nativeEvent 回调没有触发，因为其中的 debug 和 console.log 调用Animated.block()没有向控制台输出任何内容（我正在使用 Expo- debug 链接运行它）。此外，调用中的set(_translateX, translationX)行Animate.block()也永远不会执行，否则我希望看到框在拖动它们时移动（而不是在释放触摸时）。
请注意，如果您取消注释以下块，并{ nativeEvent: function... }直接删除它之后的对象，动画将按预期工作：
{
nativeEvent: {translationX: _translateX}
},
我觉得我错过了一些非常简单的东西，但我不知道它是什么。
这是用于调试的博览会链接：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,
},
})
谢谢您的帮助。