PanGestureHandler期望'onGestureHandlerEvent'监听器为函数

在React Native中，PanGestureHandler控件期望接收一个函数作为其'onGestureHandlerEvent'属性的监听器。您可以使用以下示例代码解决此问题：

import React from 'react'; import { StyleSheet, View } from 'react-native'; import Animated from 'react-native-reanimated'; import { PanGestureHandler } from 'react-native-gesture-handler';

const { Value, event } = Animated;

const App = () => { const translateX = new Value(0); const translateY = new Value(0); const onGestureEvent = event([ { nativeEvent: { translationX: translateX, translationY: translateY, }, }, ]);

return ( <View style={styles.container}> <PanGestureHandler onGestureEvent={onGestureEvent} // 您的onHandlerStateChange > <Animated.View style={[ styles.box, { transform: [{ translateX }, { translateY }], }, ]} /> </PanGestureHandler> </View> ); };

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, box: { width: 150, height: 150, backgroundColor: 'red', }, });

export default App;

在这个示例中，我们使用Animated库创建两个新的值translateX和translateY，然后使用event函数创建一个新的onGestureEvent函数，该函数接收传输数据并将其分配给我们的值。

最后，我们将PanGestureHandler包装在Animated.View中，并使用transform属性将它们应用于我们的框。