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

Question

我目前正在使用react-navigation堆栈和选项卡导航。

每次用户导航到特定屏幕时是否可以重新渲染组件？我想确保componentDidMount()每次到达特定屏幕时都重新运行，因此我通过调用适当的动作创建者从服务器获取最新数据。

我应该考虑哪些策略？我很确定这是一个常见的设计模式，但我没有看到记录的例子。

Answer 1

如果您使用的是 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])
}

Answer 2

React Navigation 生命周期事件引用自react-navigation

React Navigation 向订阅它们的屏幕组件发出事件。您可以订阅四种不同的事件：willFocus、willBlur、didFocus 和 didBlur。请在 API 参考中阅读有关它们的更多信息。

我们来看看这个

使用导航侦听器，您可以向页面添加事件侦听器，并在每次页面聚焦时调用一个函数。

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

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

替换有效负载函数并将其更改为“刷新”函数。

希望这会有所帮助。