React-Native-Навигация Как динамически задать заголовок заголовка перед визуализацией/навигацией

#react-native #react-navigation

Вопрос:

Я относительно новичок в react native и столкнулся с проблемой, которую не могу решить и даже не могу что-то найти по этому поводу.

У меня есть простое приложение с семью кнопками, по одной на каждый день в неделю, и я хочу перемещаться по экрану дня и отображать день, на который я нажал, в заголовке заголовка, но я попытался передать день в качестве аргумента, а затем установить его в аспекте, но это обновит заголовок после рендеринга с небольшой задержкой. Я пробовал это с Redux, но это кажется довольно сложным, и должен быть какой-то более простой способ сделать это.

Редактировать

Это похоже на то, что он задает заголовок заголовка перед отображением, но это предупреждает меня

Предупреждение: Невозможно обновить компонент из тела функции другого компонента.

Код главного экрана

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

Код дневного экрана

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

Комментарии:

1. с useState крючком.

2. пожалуйста, покажите пример кода, чтобы я мог помочь

3. вы можете попробовать простые способы с передачей параметров для заголовка. navigation.navigate('ScreenB', { title: 'dynamic title', });

Ответ №1:

Используйте useLayoutEffect крючок, как указано в документации по навигации React:

 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;