在嵌套选项卡导航器中反应导航标题标题
我在 Stack Navigator 中有一个 Tab Navigator,我希望将标题标题动态配置为所选选项卡的标题.就像有 3 个选项卡:主页、个人资料、添加项目,我希望标题在主页选项卡中为主页",在个人资料选项卡中为个人资料".
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. 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.
我尝试在根导航器上使用 onStateChange 并在选项卡导航器上使用 setOptions 但 onStateChange 仅在嵌套导航器中可用,而在嵌套导航器中不可用.
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.
他们无论如何我可以存档吗?
Is their anyway I can archieve this?
导航器配置是:
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>
我有一个与 react-navigation
v5 类似的导航层次结构,我想在嵌套的 TabNavigator 中更改视图内的标题标题.我最终通过使用 dangerouslyGetParent()
获取 StackNavigator 的父导航项然后使用 setOptions()
来实现它.
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. I finally achieved it by getting the parent navigation item of the StackNavigator with dangerouslyGetParent()
and then using setOptions()
.
所以这是 TabNav 中三个视图之一的最小代码:
So here is your minimal Code for one of the three views inside your 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 */
);
};