我发现的官方文档和所有教程都将PanResponder用作React Classes的一部分，但是有没有办法将其与功能组件和挂钩一起使用？我尝试这样做，但似乎不起作用：-
const App = props => {
const position = useRef(new Animated.ValueXY()).current;
const panResponder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (evt, gestureState) => {
position.setValue({x: gestureState.dx, y: gestureState.dy});
},
onPanResponderRelease: (evt, gestureState) => {},
}),
).current;
...
<Animated.View
{...panResponder.panHandlers}
style={[
{transform: position.getTranslateTransform()},
styles.appStyles,
]}>
...
</Animated.View>
在这里找到解决方案：https : //github.com/facebook/react-native/issues/25360#issuecomment-505241400
useMemo避免在每次重新渲染时重新创建PanResponder
那么你的代码应该看起来像这样
const App = props => {
const position = useRef(new Animated.ValueXY()).current;
const panResponder = React.useMemo(() => PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (evt, gestureState) => {
position.setValue({x: gestureState.dx, y: gestureState.dy});
},
onPanResponderRelease: (evt, gestureState) => {},
}), []);
...
<Animated.View
{...panResponder.panHandlers}
style={[
{transform: position.getTranslateTransform()},
styles.appStyles,
]}>
...
</Animated.View>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句