React-Native-Navigation 如何在 render/navigation 之前动态设置 header 标题

Question

我对 React Native 比较陌生，遇到了一个我无法解决甚至找不到相关问题的问题。

我有一个简单的应用程序，它有七个按钮，一个用于一周中的每一天，我想导航“日”屏幕并显示我在 header 标题中单击的那一天，但我试过了将日期作为参数传递，然后在纵横比中设置它，但这会在渲染后稍有延迟地更新标题。我已经用 Redux 试过了，但它看起来有点复杂，必须有一些更简单的方法来做到这一点。

编辑

这看起来像是在渲染之前设置了 header 标题，但它给了我一个警告

Warning: Cannot update a component from inside the function body of a different component.

主屏幕代码

onPress={() => {
                props.navigation.navigate("DayScreen", { name: title });
              }}

DayScreen 代码

const [name, setName] = useState(props.route.params.name);
props.navigation.setOptions({ title: name });

Answer 1

使用 React Navigation 文档中的 useLayoutEffect 挂钩 as advised：

import React, { useLayoutEffect } from 'react';

const YourScreen = ({ navigation, route }) => {

    // Pass the title as a parameter when navigating
    const { title } = route.params;
    
    useLayoutEffect(() => {
        navigation.setOptions({
            title,
        });
    }, [navigation]);
    
    // render something
    
};

export default YourScreen;

React-Native-Navigation 如何在 render/navigation 之前动态设置 header 标题

React-Native-Navigation How to dynamically set header title before render/navigation

react-native

react-navigation