reactjs - 使用 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(() => {
        if(isFocused){
            //Update the state you want to be updated
        }
    }, [isFocused])

}

useIsFocused Hook 检查屏幕当前是否处于焦点状态。当屏幕聚焦时，它返回一个 bool 值，该值是 true；当屏幕未聚焦时，该值是 false。 p>