react-native - 反应导航/堆栈:干净构建后标题未显示在子堆栈中
问题描述
由于对我们的应用程序进行了干净的构建,子堆栈的标题不再显示。我假设 yarn.lock 文件的删除和重新创建正确地更新了一些依赖项,所以我们不再停留在一些旧版本上。我尝试了另一个显式更新react-navigation/native
并更新react-navigation/stack
到最新版本(当前为 5.7.3 和 5.9.0),但无济于事。
我们的导航设置是一个根堆栈,下面有多个子堆栈。根堆栈是主要的应用导航,如登录和仪表板。子堆栈用于通过仪表板提供的功能块,每个块一个。子堆栈标题可以在样式和内容上有所不同。
我尝试调整Stack.Navigator
headerMode
orscreenOptions
和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
有所不同,但这显示了根标题,样式不正确,而不是自定义内容(除了标题),并且还单独在根堆栈中导航。
解决方案
好的,事实证明这在最新的 react 导航版本中有一个小的差异。而不是隐藏子堆栈的根标头
options={{
header: () => null,
}}
在其中 Stack.Screen
,它需要与
options={{
headerShown: false,
}}
推荐阅读
- javascript - Powerbi在javascriptfile中嵌入设置是否有效?
- oracle - Ora-00257 归档程序错误。仅连接内部。直到被释放
- php - 生成一个随机字符串,每 24 小时刷新一次?
- c# - c# .Net Worker 服务中的测试用例方法
- javascript - 将鼠标悬停在文本上以在固定位置显示图像
- c - 在 C/C++ 中将结构的动态数组传递给 fun
- clickhouse - 如何在 ClickHouse 中附加多个分区?
- javascript - 正则表达式仅替换字符串中的一些 / 字符
- ruby-on-rails - Rails - 创建对象的新实例时搜索/显示可用选项
- sql - SQL subselect 语句在某些机器上非常慢