使用React Navigation导航堆栈时重新渲染组件

响应导航生命周期事件 react-navigation

React导航向订阅它们的屏幕组件发出事件。您可以订阅四种不同的活动:willFocus、willBlur、didFocus和didBlur。在API参考中阅读更多关于它们的信息。

我们来看看这个,

navigation listeners 您可以向页面添加eventlistener,并在每次页面聚焦时调用函数。

const didBlurSubscription = this.props.navigation.addListener(
  'willBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);

// Remove the listener when you are done
didBlurSubscription.remove();

有效载荷 函数并用“刷新”函数更改它。

如果您使用的是React Navigation 5.X,只需执行以下操作:

import { useIsFocused } from '@react-navigation/native'

export default function App(){

const isFocused = useIsFocused()

    useEffect(() => {
        //Update the state you want to be updated
    } , [isFocused])
}

如果您正在寻找如何在组件上强制重新呈现,只需更新一些状态(其中任何一个),这将强制在组件上重新呈现。我建议您创建一个控制器状态,也就是说,当您想要强制渲染时,只需使用与上一个不同的随机值来更新该状态。