如何在 React Navigation 5 中动态设置导航栏标题和背景颜色答案

【问题标题】：How to set the navigation bar title and background color dynamically in React Navigation 5如何在 React Navigation 5 中动态设置导航栏标题和背景颜色
【发布时间】：2021-02-17 22:39:09
【问题描述】：

我正在使用 React Navigation Bar v5 并在 App.js 中设置标题，但我想在显示屏幕时动态更改它。我尝试了this.props.navigation.navigate('ExistStock', { title: 'WHATEVER' })，但它不起作用，因为它在 v4 中工作。更改导航栏标题和背景颜色的正确方法是什么？

【问题讨论】：

标签： javascript reactjs react-native react-native-android react-navigation

【解决方案1】：

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

你必须传递参数

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,
          },
        })}
      />

【讨论】：

【解决方案2】：

使用来自 React 原生导航的 useFocusEffect 和 navigation.setOptions 在渲染时动态设置导航选项。

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


const myFunctionalComponent = props => {   

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

...

您可以应用文档中列出的任何选项 https://reactnavigation.org/docs/headers/#setting-the-header-title

【讨论】：

【解决方案3】：

componentDidMount() {
    this.props.navigation.setOptions({
        title: "Whatever"
    });
}

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

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

根据组件的状态改变标题。

【讨论】：