我正在尝试使用功能组件方法在响应导航上实现一些侦听器:
const ExampleComponent = () => {
const [subs, setSubs] = React.useState([]);
React.useEffect(() => {
setSubs([
navigation.addListener('willFocus', () => console.log('will focus')),
navigation.addListener('willBlur', () => console.log('will blur')),
navigation.addListener('didFocus', () => console.log('did focus')),
navigation.addListener('didBlur', () => console.log('did blur')),
]);
return () => {
setSubs([])
}
}, [])
return (
...
)
};
遵循建议:https://fantashit.com/navigation-listeners-firing-multiple-times-per-event/
但是似乎每个监听器都被调用了两次,但我不确定如何解决此问题?
[docs说:
addListener返回一个可以调用以取消订阅该事件的函数。
尝试在清理功能中清理每个订阅:
React.useEffect(() => {
const unSubs = [
navigation.addListener('willFocus', () => console.log('will focus')),
navigation.addListener('willBlur', () => console.log('will blur')),
navigation.addListener('didFocus', () => console.log('did focus')),
navigation.addListener('didBlur', () => console.log('did blur')),
]
return function cleanup() {
unSubs.forEach((unSub) => {
unSub()
})
}
}, [])