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引述的

反应导航生命周期事件

反应导航向订阅它们的屏幕组件发出事件。您可以订阅四个不同的事件：willFocus，willBlur，didFocus和didBlur。在API参考中详细了解它们。

让我们检查一下

使用navigation listeners，您可以在页面上添加事件监听器，并在每次页面聚焦时调用一个函数。

 applicationVariants.all { variant ->
        buildType = variant.buildType.name // sets the current build type
    }

替换有效载荷功能，并使用“刷新”功能对其进行更改。

希望这会有所帮助。

Answer 3

应Dimitri在他的评论中的要求，我将向您展示如何强制重新渲染组件，因为该帖子使我们充满了歧义。

如果您正在寻找如何在组件上强制重新渲染，只需更新某些状态（它们中的任何一个），这将在组件上强制重新渲染。我建议您创建一个控制器状态，也就是说，当您要强制渲染时，只需使用与上一个状态不同的随机值更新该状态即可。

Answer 4

添加一个 useEffect 钩子，其中包含您要对其做出反应的匹配参数。确保使用控制组件的参数，以便重新渲染。示例：

export default function Project(props) {
    const [id, setId] = useState(props?.match?.params?.id);
    const [project, setProject] = useState(props?.match?.params?.project);

    useEffect(() => {
        if (props.match) {
            setId(props.match?.params.id);
            setProject(props.match?.params.project);
        }
    }, [props.match?.params]);
   
......

使用React Navigation浏览堆栈时重新渲染组件

4 个答案: