尝试重置导航会引发错误

Question

每次我到达特定屏幕（在我的例子中是主页）时，我都会尝试重置导航堆栈。

这是一段代码：

componentDidMount(){
        const { navigation } = this.props

        this.focusListener = navigation.addListener('focus', () => {
            this._getData()
            console.log('coucou')
            navigation.dispatch(
                CommonActions.reset({
                  index: 0,
                  routes: [
                    { name: 'Home' },
                  ],
                })
            );
        });
        this._updateNavigationParams()
    }

    componentWillUnmount() {
        // Remove the event listener before removing the screen from the stack
        this.focusListener.remove();
    }

如果我删除以下部分，我的代码可以正常运行：

navigation.dispatch(
                    CommonActions.reset({
                      index: 0,
                      routes: [
                        { name: 'Home' },
                      ],
                    })
                );

我需要一个监听器，因为当我回到 HomeScreen 时我必须刷新数据，而且每次回到这里时我都会使用它来重置导航堆栈。

我得到的错误是：

TypeError: this.focusListener.remove 不是函数。 （在 'this.focusListener.remove()', 'this.focusListener.remove' 是 未定义）。

Answer 1

好的，所以在网上找到的（在 ComponentWillUnmount() 函数上使用 .RemoveListener() 或 .Remove()）不再有效。

仅查看 react 导航文档就给了我解决方案 (here) 我只需要调用使用侦听器创建的 const 即可。就我而言，我必须像这样修改 ComponentWillUnmount

componentWillUnmount() {
    // Remove the event listener before removing the screen from the stack
    this.focusListener();
}