反应原生导航.goBack()答案

【问题标题】：React native navigation.goBack()反应原生导航.goBack()
【发布时间】：2020-11-26 19:48:57
【问题描述】：

我在 React Native 项目中有简单的导航，它正在使用抽屉。

我只有 4-5 页的菜单，而且它们大多数时候只有一页导航。

在主页上，我有菜单，我导航：navigation.navigate()... 工作正常，但是当我想回来时，我有带有 navigation.goBack() 的“返回”链接... goBack 是返回缓存页面（大部分时间是主页）。

例如，在标题中，我有未读消息的计数器，然后当我使用 Navigation.navigate() 导航到收件箱时，我将所有消息标记为“已读”。

点击“返回”后，我仍然会在主页上看到计数器，因为它被缓存了，但如果我之后使用 navigation.navigate... 导航，它会被重置，但在返回 navigation.goBack() 时再次...缓存。

有什么办法可以防止这种情况发生。

谢谢！

感谢 Ahmad Abou Saleh...我在导航 5 中稍微更改了代码：

componentDidMount() {
        const { navigation } = this.props;
        this.focusListener = navigation.addListener('focus', () => {
            //code goes here......
        });
    }

【问题讨论】：

标签： react-native

【解决方案1】：

可以在首页添加这个监听器，每次访问首页都会触发

//in componentDidMount() 
this.willFocusSubscription = this.props.navigation.addListener(
'willFocus',
() => {
    //add your code here 
} 
);
//in componentWillUnmount() 
this.willFocusSubscription.remove(); //remove listener when page unmounted

【讨论】：

谢谢！在 componentDidMount 内部，我刚刚调用了一个从 DB 获取数据的函数。因此，当我添加您的代码并将“//your code here”替换为“this.getMessages()”时。现在 getMessages 没有被触发。你知道我做错了什么吗？附言。我没有收到错误，只是没有数据。
因为我使用的是导航 5...此代码略有不同...我将编辑我自己的问题..所以如果有人需要它可以使用它。感谢您的帮助，您让我知道需要做什么！
没问题，别忘了在componentWillUnmount()上去掉监听，这样你的函数就不会在页面不活动的时候被触发

【解决方案2】：

谢谢！实际上我没有说...正如我在某个地方的文档中看到的（不要相信我的话），在 Navigation 5 中不再需要使用焦点。不过既然你提到了，我会调查一下……再次感谢

【讨论】：