callstack / callstack/react-native-paper
Using AppBar with MaterialBottomTabNavigator
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.2k
- 平均合并
- 5 天 23 小时
- 30 天内合并 PR
- 12
描述
### Current behaviour
Bottom Tab Navigators do not include the `header` property in `screenOptions` preventing a default `AppBar` from being included.
```
Type '{ header: ({ navigation, route, options, back }: { navigation: any; route: any; options: any; back: any; }) => Element; }' is not assignable to type 'MaterialBottomTabNavigationOptions | ((props: { route: RouteProp; navigation: any; }) => MaterialBottomTabNavigationOptions) | undefined'.
Object literal may only specify known properties, and 'header' does not exist in type 'MaterialBottomTabNavigationOptions | ((props: { route: RouteProp; navigation: any; }) => MaterialBottomTabNavigationOptions)'.ts(2322)
types.d.ts(30, 5): The expected type comes from property 'screenOptions' which is declared here on type 'IntrinsicAttributes & Omit & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<...> | ... 1 more ... | undefined; screenOptions?: MaterialBottomTabNavigationOptions | ... 1 more ... | undefined; } & DefaultRouterOptions & { ...; } & Partial<...>, "children" | ... ...'
```
### Expected behaviour
Clear documentation is provided that details how to include a default header (i.e. an `AppBar`) when using `createMaterialBottomTabNavigator`.
### How to reproduce?
```
const Tab = createMaterialBottomTabNavigator();
{
const title = getHeaderTitle(options, route.name);
return (
);
},
}}>
```
### See Also
https://callstack.github.io/react-native-paper/docs/guides/react-navigation
https://callstack.github.io/react-native-paper/docs/guides/bottom-navigation
### Your Environment
| software | version
| --------------------- | -------
| react-native | 0.72.5
| react-native-paper | 5.10.6
| node | 18.17.1
| npm or yarn | 10.1.0
| expo sdk | 49.0.11
贡献指南
调研方向
从 issue 中链接的 React Navigation 指南和底部导航指南开始。记录 createMaterialBottomTabNavigator 如何包含默认的 AppBar 标头,处理所示的 TypeScript 错误,并在相关指南中明确预期的配置。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native, typescript
- 领域
- documentation, mobile
- Issue 类型
- 文档
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 38/100