单击底部选项卡导航器上的选项卡时，如何更新react本机组件

Question

我使用底部选项卡导航器在React原生导航。当我切换标签时，组件不更新。请让我知道如何更新/刷新整个组件，当我点击底部的选项卡选项卡导航

Answer 1

您可以使用导航侦听器检查导航事件，当屏幕聚焦时，它将触发如下功能：

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();
  }

如果要强制更新，请检查此问题

Answer 2

这里有一个简单的解决方案。

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

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