React-Native-Navigation如何在渲染/导航之前动态设置标题

Question

我是react native的新手，我遇到了一个我无法解决的问题，甚至找不到关于它的一些东西。

我有一个简单的应用程序，有七个按钮，一个在一周的每一天，我想导航的日子屏幕和显示的日子，我点击在标题标题，但我试图传递的日子作为参数，然后设置它的方面，但这将更新标题后渲染略有延迟。我试过用Redux，但它似乎有点复杂，一定有一些更简单的方法来做到这一点。

编辑

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

警告:不能从不同组件的函数体内部更新组件。

MainScreen代码

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

DayScreen代码

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

Answer 1

按照React导航文档中的建议使用useLayoutEffect钩子:

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;