本文介绍了React Native 的 panResponder 具有来自 useState 的陈旧价值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要读取 onPanResponderMove
中 useState
的值.在页面加载 onPanResponderMove
正确记录 0
的初始值.
I need to read the value of useState
in onPanResponderMove
. On page load onPanResponderMove
correctly logs the initial value of 0
.
但是,在我点击 TouchableOpacity
以增加 foo
后,onPanResponderMove
仍然注销 0
而不是它新价值.
However after I click on TouchableOpacity
to increment foo
, the onPanResponderMove
stills logs out 0
rather than it's new value.
export default function App() {
const [foo, setFoo] = React.useState(0);
const panResponder = React.useRef(
PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {},
onPanResponderMove: (evt, gestureState) => {
console.log(foo); // This is always 0
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {},
onPanResponderTerminate: (evt, gestureState) => {},
onShouldBlockNativeResponder: (evt, gestureState) => {
return true;
},
})
).current;
return (
<View style={{ paddingTop: 200 }}>
<TouchableOpacity onPress={() => setFoo(foo + 1)}>
<Text>Foo = {foo}</Text>
</TouchableOpacity>
<View
{...panResponder.panHandlers}
style={{ marginTop: 200, backgroundColor: "grey", padding: 100 }}
>
<Text>Text for pan responder</Text>
</View>
</View>
);
}
推荐答案
使用 useEffect
您可以在 foo
更改时创建新的 PanResponder
.但是我不确定它的性能如何.
With useEffect
you can create a new PanResponder
when foo
changes. However I'm not sure how performant this is.
export default function App() {
const [foo, setFoo] = React.useState(0);
const pan = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {},
onPanResponderMove: (evt, gestureState) => {
console.log(foo); // This is always 0
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {},
onPanResponderTerminate: (evt, gestureState) => {},
onShouldBlockNativeResponder: (evt, gestureState) => {
return true;
},
});
const [panResponder, setPanResponder] = React.useState(pan);
useEffect(() => {
setPanResponder(pan);
}, [foo]);
return (
<View style={{ paddingTop: 200 }}>
<TouchableOpacity onPress={() => setFoo(foo + 1)}>
<Text>Foo = {foo}</Text>
</TouchableOpacity>
<View
{...panResponder.panHandlers}
style={{ marginTop: 200, backgroundColor: "grey", padding: 100 }}
>
<Text>Text for pan responder</Text>
</View>
</View>
);
}
这篇关于React Native 的 panResponder 具有来自 useState 的陈旧价值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!