[英]React Navigation header title in nested tab navigator
I have a Tab Navigator inside a Stack Navigator and I want the header title to be dynamically configured as the title of the tab selected.我在 Stack Navigator 中有一个 Tab Navigator,我希望将 header 标题动态配置为所选选项卡的标题。 Like there's 3 tabs: Home, Profile, Add Item and I want the header title to be "Home" when in the home tab, "Profile" when in the profile tab.
就像有 3 个选项卡:主页、个人资料、添加项目,我希望 header 在主页选项卡中的标题为“主页”,在个人资料选项卡中的标题为“个人资料”。
I tried using onStateChange on the root navigator and setOptions on the tab navigator but onStateChange is only available in the and not in the nested navigators.我尝试在根导航器上使用 onStateChange,在选项卡导航器上使用 setOptions,但 onStateChange 仅在嵌套导航器中可用,而在嵌套导航器中不可用。
Is their anyway I can archieve this?他们无论如何我可以实现这个吗?
The navigator config is:导航器配置是:
const TabNav = (
<Tab.Navigator>
<Tab.Screen name='Home' component={HomeScreen}/>
<Tab.Screen name='Profile' component={ProfileScreen}/>
<Tab.Screen name='Add Item' component={AddItemScreen}/>
</Tab.Navigator>
)
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='Login' component={LoginScreen}/>
<Stack.Screen name='App' component={TabNav}/>
</Stack.Navigator>
</NavigationContainer>
I had a similar Navigation hierarchy with react-navigation
v5 and I wanted to change the Header Title inside a View in the nested TabNavigator.我有一个与
react-navigation
v5 类似的导航层次结构,我想更改嵌套 TabNavigator 中视图内的 Header 标题。 I finally achieved it by getting the parent navigation item of the StackNavigator with dangerouslyGetParent()
and then using setOptions()
.我最终通过使用
dangerouslyGetParent()
获取 StackNavigator 的父导航项然后使用setOptions()
来实现它。
So here is your minimal Code for one of the three views inside your TabNav:所以这是 TabNav 中三个视图之一的最小代码:
import React, {useCallback} from 'react';
import { useNavigation, useFocusEffect } from '@react-navigation/native';
const HomeScreen = (props) => {
// TabNav navigation item
const navigation = useNavigation();
// Effect will be triggered everytime the Tab changes
// Mounting is not enough -> Tabs will not be unmount by change
useFocusEffect(
useCallback(() => {
// Get StackNav navigation item
const stackNavigator = navigation.dangerouslyGetParent();
if(stackNavigator){
// Actually set Title
stackNavigator.setOptions({
title: "Home"
});
}
}, [navigation])
);
return (
/* Component Items */
);
};
From documentation https://reactnavigation.org/docs/screen-options-resolution/来自文档https://reactnavigation.org/docs/screen-options-resolution/
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
function getHeaderTitle(route) {
// If the focused route is not found, we need to assume it's the initial screen
// This can happen during if there hasn't been any navigation inside the screen
// In our case, it's "Feed" as that's the first screen inside the navigator
const routeName = getFocusedRouteNameFromRoute(route) ?? 'Feed';
switch (routeName) {
case 'Feed':
return 'News feed';
case 'Profile':
return 'My profile';
case 'Account':
return 'My account';
}
}
<Stack.Screen
name="Home"
component={HomeTabs}
options={({ route }) => ({
headerTitle: getHeaderTitle(route),
})}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.