当单击底部选项卡导航器上的选项卡时，如何更新 react-native 组件答案

【问题标题】：How do I update react-native component, when click on tab on bottom Tab Navigator当单击底部选项卡导航器上的选项卡时，如何更新 react-native 组件
【发布时间】：2021-10-09 05:47:37
【问题描述】：

我在 React-native 中使用底部选项卡导航器进行导航。当我切换选项卡时，组件没有更新。请让我知道当我点击底部标签导航器的标签时如何更新/刷新整个组件

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

这是一个简单的解决方案。

import { useFocusEffect } from '@react-navigation/native';
useFocusEffect(
   React.useCallback(() => {
       console.log("Function Call on TAb change")
   }, [])
);

这里是您可以阅读更多内容的链接。 https://reactnavigation.org/docs/function-after-focusing-screen/

【讨论】：

【解决方案2】：

您可以使用导航监听器检查Navigation Events，当屏幕获得焦点时会触发如下函数：

useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => {
    //Your refresh code gets here
  });
  return () => {
    unsubscribe();
  };
}, [navigation]);

还有这样的类组件：

  componentDidMount() {
    this._unsubscribe = navigation.addListener('focus', () => {
      //Your refresh code gets here
    });
  }

  componentWillUnmount() {
    this._unsubscribe();
  }

如果您想强制更新，请查看question

【讨论】：