我正在使用React Navigation库在React Native中构建一个应用程序。我面临的问题是,在堆栈导航器(HomeStack)内呈现选项卡导航器时,每个单独的选项卡都保留父堆栈导航器“ Home”的标题。
在阅读了有关嵌套导航器(https://reactnavigation.org/docs/nesting-navigators/)的文档之后,我尝试将Tab Navigator中的每个Tab设置为它自己的堆栈,删除父堆栈上的标头(使用options={{headerShown: false}}
),并设置单个标头每个选项卡堆栈上的标题(使用options={{ headerShown: true
),但这只是将标题从每个选项卡中完全删除。
当前流程是,用户打开应用程序,定向到登录堆栈,然后单击“登录”按钮后,应用程序将呈现HomeStack,其中显示了各种Tab选项。但是,即使每个选项卡都是其自己的唯一堆栈,每个选项卡都具有相同的标题“主目录”。
这是导航器的当前布局(带有围绕所有内容的身份验证上下文:]
//Home Screen (nested Tab Navigator)
function HomeScreen() {
return (
<Tab.Navigator >
<Stack.Screen name="Profile" component={Profile}/>
<Stack.Screen name="Goals" component={Goals}/>
<Stack.Screen name="Board" component={Board}/>
<Stack.Screen name="People" component={People}/>
</Tab.Navigator>
);
//Child Stacks (within Tab Navigator -- all follow same format)
function Profile() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Profile Screen</Text>
</View>
)
}
//Parent Navigation Container
return (
<AuthContext.Provider value={authContext}>
<NavigationContainer>
<Stack.Navigator>
{state.userToken == null ? (
<Stack.Screen name="SignIn" component={SignInScreen} />
) : (
<Stack.Screen name="Home" component={HomeScreen}/>
)}
</Stack.Navigator>
</NavigationContainer >
</AuthContext.Provider >
);
此问题先前已问过,该解决方案过去是在初始堆栈声明期间添加更新的参数(在此处讨论:https://github.com/react-navigation/react-navigation/issues/741),但是自最新更新(版本5)以来,Navigators功能的方式已更改。现在,将参数添加到初始堆栈声明中会返回错误:
此操作的最终目标是使每个Tab都充当其自己的Stack,并在屏幕的左上/右上角显示带有唯一标题/操作按钮的标题。我仍然不清楚如何通过新的更改来完成此操作,因此我们将不胜感激!
投票
function getHeaderTitle(route) {
const routeName = route.state
? route.state.routes[route.state.index].name
: route.params?.screen || 'Profile';
switch (routeName) {
case 'Profile':
return 'My profile';
case 'Goals':
return 'Goals';
case 'Board':
return 'Board';
case 'People':
return 'People';
}
}
// ...
<Stack.Screen
name="Home"
component={HomeTabs}
options={({ route }) => ({
headerTitle: getHeaderTitle(route),
})}
/>
https://reactnavigation.org/docs/screen-options-resolution#setting-parent-screen-options-based-on-child-navigators-state