callstack / callstack/react-native-paper

Using AppBar with MaterialBottomTabNavigator

未关闭
#4,098 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
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

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。