我要做什么:响应用户的向上/向下滑动来更改状态。 环境:React native 0.61.5
我的组件如下。
import React, { useRef, useState } from 'react';
import { View, PanResponder } from 'react-native';
function SimpleWrapper(props) {
const { children } = props;
const [abc, setabc] = useState(0);
console.log('SimpleWrapper', abc);
const panResponder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => handleShouldSetPanResponder(evt, gestureState),
// onStartShouldSetPanResponderCapture: (evt, gestureState) => handleShouldSetPanResponder(evt, gestureState),
onMoveShouldSetPanResponder: (evt, gestureState) => handleShouldSetPanResponder(evt, gestureState),
// onMoveShouldSetPanResponderCapture: (evt, gestureState) => handleShouldSetPanResponder(evt, gestureState),
// onPanResponderGrant: (evt, gestureState) => console.log('onPanResponderGrant', gestureState),
onPanResponderMove: (evt, gestureState) => handleonPanResponderMove(evt, gestureState),
onPanResponderTerminationRequest: () => {}
// onPanResponderRelease: (evt, gestureState) => handlePanResponderRelease(evt, gestureState)
})
).current;
const handleShouldSetPanResponder = (evt, gestureState) => {
const { dy } = gestureState;
const isvalid = evt.nativeEvent.touches.length === 1 && Math.abs(dy) > gestureConfig.gestureIsClickThreshold;
return isvalid;
};
const handleonPanResponderMove = (evt, gestureState) => {
const { dy, vy } = gestureState;
console.log('in handleonPanResponderMove:', abc, gestureState);
if (dy < 0) {
setabc(abc + 1);
} else if (dy > 0) {
setabc(abc - 1);
}
// }
};
return (
<View {...panResponder.panHandlers} style={}>
{children}
</View>
);
}
export default SimpleWrapper;
基本上我想在onMoveShouldSetPanResponder中增加/减少状态参数,
现在, 在onMoveShouldSetPanResponder的首次启动时,“ abc”成功增加/减少。该组件中最顶层的控制台也显示新值。
但是, 之后,在所有连续触发中,onMoveShouldSetPanResponder函数内部的控制台始终将abc打印为 0 (即初始值)。它永远不会改变。
是不是我们无法在onMoveShouldSetPanResponder中访问更新的状态?我是否缺少某些东西,或者还有其他方法吗?