[英]How to set the navigation bar title and background color dynamically in React Navigation 5
我正在使用 React Navigation Bar v5 并在 App.js 中设置标题,但我想在显示屏幕时动态更改它。 我试过this.props.navigation.navigate('ExistStock', { title: 'WHATEVER' })
但它在 v4 中不起作用。 更改导航栏标题和背景颜色的正确方法是什么?
使用来自 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 中列出的任何选项
您可以像在 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,
},
})}
/>
componentDidMount() {
this.props.navigation.setOptions({
title: "Whatever"
});
}
这可以用于在屏幕上添加标题或相应地更改标题。
componentDidMount() {
this.props.navigation.setOptions({
title:
this.state.count === 0
? 'Select items'
: `${this.state.count} items selected`,
});
});
}
根据组件的状态更改标题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.