feat: modernize BottomNavigationBar
維護者通常 7 天內回覆
評估
- 難度
- 5/5
- 預估耗時
- 一週以上
- 新手友好度
- 35/100
- Issue 類型
- 功能
- 描述清晰度
- 基本清楚
- 活躍度
- 冷清
- 技術堆疊
- react-native, typescript
研究方向
從現有的 BottomNavigation 和 BottomNavigation.Bar 進入點開始，接著將它們目前的行為與連結的 Material 3 navigation bar 和 expressive 規格進行比較。檢視列出的色彩、尺寸和行為差異，包括重新命名為 NavigationBar；當清單中的項目都已處理且 MD3 行為已一致實作時，即表示完成。
由索引模型根據 Issue 內容生成。
描述
Modernize the existing BottomNavigationBar to reuse theme tokens (color, shape, motion, typography etc) and make sure the MD3 specs are respected. See the expressive update too: https://m3.material.io/components/navigation-bar/overview
Current State
Bottom Navigation
MD3 spec: Navigation bar
Specs link: https://m3.material.io/components/navigation-bar/specs
Notes
BottomNavigationis a router-aware wrapper aroundBottomNavigation.Barthat handles scene management and tab transitions. MD3 compliance is governed byBottomNavigation.Barbelow.
Bottom Navigation Bar
MD3 spec: Navigation bar
Specs link: https://m3.material.io/components/navigation-bar/specs
Color tokens
- Container
surfaceContainer✅ - Active icon
onSecondaryContainer✅ - Active indicator
secondaryContainer✅ - Inactive icon
onSurfaceVariant✅ - Inactive label
onSurfaceVariant✅ - Active label uses
onSurface. Spec tokenNav bar item active label text colormaps tosecondary
Spacing / sizing
- Active indicator 64x32dp with 16dp corner radius ✅
- Icon-to-label gap 4dp (
marginBottom: 4on icon container) ✅ -
v3NoLabelContainerheight is hardcoded to 80dp. Spec requires 64dp -
BAR_HEIGHT = 56constant is used for label height styling. Spec bar height is 64dp
Behavior
-
shiftingmode (inactive tabs hide labels) is an MD2 pattern not present in MD3 labeled={false}hides all labels (not in MD3 spec, but a deliberate extension used by Google’s own products e.g. Gmail) ✅-
rippleColor: 'transparent'suppresses state layer feedback. MD3 requires visible state layers (8% hovered, 10% focused/pressed) - Flexible navigation bar (horizontal items for medium windows) not implemented. M3 Expressive requires horizontal layout support
- Baseline navigation bar is not recommended in M3 Expressive; flexible variant should replace it
Notes
- Rename to match MD3:
NavigationBar
- 主要語言
- TypeScript
- 星號
- 14.5k
- 分支
- 2.3k
- 平均合併
- 6 天 2 小時
- 30 天內合併 PR
- 1
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
callstack/react-native-paper 的其他 Issue
-
Menu ignores the keyboard when it mounts while the keyboard is already open可能已有人在做 @manchoudhary 於 37 天前認領。 未關閉
難度 2/5 1-3 小時 新手友好度 76/100
callstack/react-native-paper#5096 ·
維護者通常 7 天內回覆
-
Color Picker Popup Is Obscured On "Guides -> Theming -> Creating Dynamic Theme Colors" Documentation On Both v5 and v6可能已有人在做 @fatihcvs 於 32 天前認領。 未關閉bug
難度 2/5 1-3 小時 新手友好度 68/100
callstack/react-native-paper#5093 ·
維護者通常 7 天內回覆
-
Tooltip: onPress event object is not propagated to parent component on native可能已有人在做 @Shevilll 於 124 天前認領。 未關閉bug
難度 2/5 1-3 小時 新手友好度 74/100
callstack/react-native-paper#5003 ·
維護者通常 7 天內回覆
-
Snackbar stays mounted after `visible=false` under new architecture (iOS + Android)可能已有人在做 @momomuchu 於 112 天前認領。 未關閉
難度 2/5 1-3 小時 新手友好度 78/100
callstack/react-native-paper#4951 ·
維護者通常 7 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 68/100
callstack/react-native-paper#4881 ·
維護者通常 7 天內回覆
查看 callstack/react-native-paper 的全部 Issue
相似的 Issue
-
Add: Pbs Kids未關閉check:passed streams:add
難度 2/5 1-3 小時 新手友好度 67/100
維護者通常 2 天內回覆
-
maintanance
難度 2/5 1-3 小時 新手友好度 76/100
inmanta/web-console#7583 ·
維護者通常 1 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 70/100
deltachat/deltachat-desktop#6881 · 1 則留言 ·
維護者通常 3 天內回覆
-
[Bug Report][3.13.7] VDataTable with select-strategy="single" shows select-all checkbox in mobile mode可能已有人在做 @lazerg 今天認領。 未關閉S: triage
難度 2/5 1-3 小時 新手友好度 65/100
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 68/100
phivk/rubiks-lab#33 ·
維護者通常 1 天內回覆