Javascript 如何在React navigation 5中动态设置导航栏标题和背景色

我正在使用React Navigation Bar v5并在App.js中设置标题，但我想在屏幕显示时动态更改它。 我尝试了

this.props.navigation.navigate（'ExistStock'，{title:'WHATEVER'}）

但是它没有像在v4中那样工作。

---

更改导航栏标题和背景颜色的正确方法是什么？

使用React native navigation with navigation.setOptions中的useFocusEffect在渲染时动态设置导航选项

import React, {useCallback} from 'react';
import {useFocusEffect} from '@react-navigation/native';  


const myFunctionalComponent = props => {   

        useFocusEffect(
            useCallback(() => {
                props.navigation.setOptions({
                    title: 'Whatever',
                });
            }, [props.navigation])
        );

...

您可以应用文档中列出的任何选项

---

您可以在screenOptions中执行此操作，就像在V4中一样

您必须传递参数

navigation.navigate('Details', { id: item.id, name: item.name,color:item.color })

在导航器中，您可以将其用作标题和颜色

  <Stack.Screen
        name="Details"
        component={Details}
        options={({ route }) => ({
          title: route.params.name,
          headerStyle: {
            backgroundColor: oute.params.color,
          },
        })}
      />

({
标题：route.params.name，
头型：{
背景颜色：oute.params.color，
},
})}
/>

这可用于在屏幕上添加标题或相应地更改标题

componentDidMount() {
    this.props.navigation.setOptions({
        title:
    this.state.count === 0
      ? 'Select items'
      : `${this.state.count} items selected`,
});
    });
}

根据组件的状态更改标题

componentDidMount() {
    this.props.navigation.setOptions({
        title:
    this.state.count === 0
      ? 'Select items'
      : `${this.state.count} items selected`,
});
    });
}