react-navigation/stack:header 干净构建后未显示在子堆栈中
react-navigation/stack: header not showing in sub stack after clean build
自从对我们的应用进行干净构建后,header 子堆栈不再显示。
我假设 yarn.lock 文件的删除和重建正确地更新了一些依赖项,所以我们不再徘徊在一些旧版本上。
我尝试将 react-navigation/native
和 react-navigation/stack
显式更新到最新版本(当前为 5.7.3 和 5.9.0),但无济于事。
我们的导航设置是一个根堆栈,下面有多个子堆栈。根堆栈是主要的应用程序导航,如登录和仪表板。子堆栈用于通过仪表板可用的功能块,每个块一个。
子堆栈 header 可以在样式和内容上有所不同。
我尝试调整 Stack.Navigator
headerMode
或 screenOptions
和 Stack.Screen
options
,但找不到解决方案。因此,我们将不胜感激。
显示问题的代码的简化版本是这样的:
// Root navigation
enum RootRoutes {
Login = 'Login',
Dashboard = 'Dashboard',
Sub = 'Sub',
}
type RootStackParamList = {
[RootRoutes.Login]: undefined;
[RootRoutes.Dashboard]: undefined;
[RootRoutes.Sub]: undefined;
};
const RootStack = createStackNavigator<RootStackParamList>();
const RootStackNavigation = () => {
return (
<RootStack.Navigator
headerMode='screen'
initialRouteName={RootRoutes.Login}
screenOptions={{
headerStyle: {
elevation: 0,
},
}}
>
<RootStack.Screen
component={LoginScreen}
name={RootRoutes.Login}
/>
<RootStack.Screen
component={DashboardScreen}
name={RootRoutes.Dashboard}
options={{
title: 'Dashboard',
}}
/>
<RootStack.Screen
component={SubStackNavigation}
name={RootRoutes.Sub}
options={{
header: () => null, // needed to hide the header on sub screens
}}
/>
</RootStack.Navigator>
);
};
// Sub navigation
enum SubRoutes {
Index = 'SubIndex',
}
type SubStackParamList = {
[SubRoutes.Index]: undefined;
};
const SubStack = createStackNavigator<SubStackParamList>();
const SubStackNavigation = () => {
return (
<SubStack.Navigator
headerMode='screen'
initialRouteName={SubRoutes.Index}
screenOptions={{
headerTransparent: true,
}}
>
<SubStack.Screen
component={IndexScreen}
name={SubRoutes.Index}
options={{
title: 'Sub screen',
}}
/>
</SubStack.Navigator>
);
};
// App.tsx
export const App = () => {
return (
<NavigationContainer><RootStackNavigation/></NavigationContainer>
);
};
仅删除 header: () => null
有所不同,但这显示了根 header,样式不正确且没有自定义内容(标题除外),并且还单独在根堆栈中导航。
好的,原来这是最新的react导航版本的一个小差异。而不是用
隐藏子堆栈的根 header
options={{
header: () => null,
}}
在其Stack.Screen
中,需要与
options={{
headerShown: false,
}}
自从对我们的应用进行干净构建后,header 子堆栈不再显示。
我假设 yarn.lock 文件的删除和重建正确地更新了一些依赖项,所以我们不再徘徊在一些旧版本上。
我尝试将 react-navigation/native
和 react-navigation/stack
显式更新到最新版本(当前为 5.7.3 和 5.9.0),但无济于事。
我们的导航设置是一个根堆栈,下面有多个子堆栈。根堆栈是主要的应用程序导航,如登录和仪表板。子堆栈用于通过仪表板可用的功能块,每个块一个。 子堆栈 header 可以在样式和内容上有所不同。
我尝试调整 Stack.Navigator
headerMode
或 screenOptions
和 Stack.Screen
options
,但找不到解决方案。因此,我们将不胜感激。
显示问题的代码的简化版本是这样的:
// Root navigation
enum RootRoutes {
Login = 'Login',
Dashboard = 'Dashboard',
Sub = 'Sub',
}
type RootStackParamList = {
[RootRoutes.Login]: undefined;
[RootRoutes.Dashboard]: undefined;
[RootRoutes.Sub]: undefined;
};
const RootStack = createStackNavigator<RootStackParamList>();
const RootStackNavigation = () => {
return (
<RootStack.Navigator
headerMode='screen'
initialRouteName={RootRoutes.Login}
screenOptions={{
headerStyle: {
elevation: 0,
},
}}
>
<RootStack.Screen
component={LoginScreen}
name={RootRoutes.Login}
/>
<RootStack.Screen
component={DashboardScreen}
name={RootRoutes.Dashboard}
options={{
title: 'Dashboard',
}}
/>
<RootStack.Screen
component={SubStackNavigation}
name={RootRoutes.Sub}
options={{
header: () => null, // needed to hide the header on sub screens
}}
/>
</RootStack.Navigator>
);
};
// Sub navigation
enum SubRoutes {
Index = 'SubIndex',
}
type SubStackParamList = {
[SubRoutes.Index]: undefined;
};
const SubStack = createStackNavigator<SubStackParamList>();
const SubStackNavigation = () => {
return (
<SubStack.Navigator
headerMode='screen'
initialRouteName={SubRoutes.Index}
screenOptions={{
headerTransparent: true,
}}
>
<SubStack.Screen
component={IndexScreen}
name={SubRoutes.Index}
options={{
title: 'Sub screen',
}}
/>
</SubStack.Navigator>
);
};
// App.tsx
export const App = () => {
return (
<NavigationContainer><RootStackNavigation/></NavigationContainer>
);
};
仅删除 header: () => null
有所不同,但这显示了根 header,样式不正确且没有自定义内容(标题除外),并且还单独在根堆栈中导航。
好的,原来这是最新的react导航版本的一个小差异。而不是用
隐藏子堆栈的根 headeroptions={{
header: () => null,
}}
在其Stack.Screen
中,需要与
options={{
headerShown: false,
}}