React Native Paper底部导航与Appbar集成React Navigation完整指南

React Native Paper底部导航与Appbar集成React Navigation完整指南【免费下载链接】react-native-paperMaterial Design for React Native (Android iOS)项目地址: https://gitcode.com/gh_mirrors/re/react-native-paperreact-native-paper是 Material Design 风格的 React Native 组件库搭配 React Navigation 可以快速搭出专业级的移动应用。本文带你用 4 个步骤搞定底部导航BottomNavigation与顶部标题栏Appbar的集成方案让你的 App 一上线就拥有 Material 3 质感。1. 为什么是这套组合拳很多新手第一反应是底部标签栏用 Navigation 自带的顶栏用 Paper 的结果两边样式割裂。官方推荐的思路是各司其职react-navigation/bottom-tabs负责路由、状态管理、屏幕切换BottomNavigation.Bar负责渲染 Material 3 风格的标签栏波纹、徽章、shifting/labeled 两种模式Appbar.Header替代堆栈导航的默认 header提供标题、返回按钮、操作按钮。 核心原则导航状态归 React Navigation视觉表现归 react-native-paper两者通过tabBar和header两个插槽无缝对接。2. 准备工作安装与依赖集成前请先确认装好了这几个包yarn add react-native-paper react-navigation/native react-navigation/bottom-tabs react-navigation/native-stack还需要两个辅助依赖依赖作用react-native-vector-icons/material-design-icons为底部标签提供 Material 图标react-native-safe-area-context安全区 insets让标签栏避开 Home 指示条别忘了在最外层包上PaperProvider否则Menu、Snackbar等组件会失去主题上下文PaperProvider NavigationContainer.../NavigationContainer /PaperProvider3. 底部导航一行 tabBar 换成 Material 3 标签栏BottomNavigation.Bar的完整 API 定义在 src/components/BottomNavigation/BottomNavigation.tsx 中几个新手最关心的属性shifting激活标签上移并显示文案未激活标签只显示图标需要至少 2 个标签labeled{false}纯图标模式适合空间紧张的场景badge标签可显示红点true或数字/文字消息类 App 必备keyboardHidesNavigationBar键盘弹起时自动隐藏标签栏Android 上效果最佳。把BottomNavigation.Bar传给tabBar插槽即可标签栏从导航器拿到state点击事件通过onTabPress派发回去Tab.Navigator screenOptions{{ animation: shift }} tabBar{({ navigation, state, descriptors }) ( BottomNavigation.Bar navigationState{state} safeAreaInsets{insets} onTabPress{({ route, preventDefault }) { const event navigation.emit({ type: tabPress, target: route.key, canPreventDefault: true, }); if (event.defaultPrevented) preventDefault(); else navigation.dispatch(CommonActions.navigate(route.name)); }} renderIcon{({ route, focused, color }) descriptors[route.key].options.tabBarIcon?.({ focused, color, size: 24 })} getLabelText{({ route }) descriptors[route.key].options.tabBarLabel ?? route.name} / )} Tab.Screen nameHome component{HomeScreen} options{{ tabBarIcon: ({ color }) ( MaterialCommunityIcons namehome color{color} size{26} / )}} / /Tab.Navigator标签内部布局逻辑可以看 src/components/BottomNavigation/BottomNavigationBar.tsx。官方完整文档见 docs/6.x/docs/guides/bottom-navigation.md。4. 顶部 Appbar替换 Stack 导航的默认 Header先搭一个最小的 Stack 导航再整体替换 header。完整步骤可对照 docs/6.x/docs/guides/react-navigation.mdStack.Navigator initialRouteNameHome screenOptions{{ header: (props) CustomNavigationBar {...props} / }} Stack.Screen nameHome component{HomeScreen} / Stack.Screen nameDetails component{DetailsScreen} / /Stack.NavigatorCustomNavigationBar就是三件套的组合源码位于 src/components/Appbar/Appbar.tsxexport default function CustomNavigationBar({ navigation, route, options, back }) { const title getHeaderTitle(options, route.name); return ( Appbar.Header {back ? Appbar.BackAction onPress{navigation.goBack} / : null} Appbar.Content title{title} / /Appbar.Header ); }三个关键细节getHeaderTitle来自react-navigation/elements自动取当前屏幕的title不用硬编码back是判断是否在栈底的开关——栈底如 Home渲染菜单按钮子页面渲染返回箭头这是最实用的模式想加更多菜单用Menu组件锚定一个Appbar.Action状态控制显隐即可Appbar.Action的 API 见 src/components/Appbar/AppbarAction.tsx。5. Appbar 进阶玩法四种模式与底部操作栏v5theme version 3起Appbar新增了mode属性一行切换四种高度风格非常适合做大标题页 → 子页面缩小的层次感mode效果small默认标准高度 64适合列表页center-aligned标题居中适合详情页medium112 高度适合内容页large152 高度适合首页大图头再加上elevated属性让背景带主色调并显示投影和Surface的层次感一脉相承。除了顶部Appbar还能做底部操作栏position: absolute贴底摆放 3~4 个Appbar.Action中间再插一个FAB就是 Google 风格的标准底部栏用法参考 src/components/Appbar/Appbar.tsx 中的示例。6. 常见坑位速查底部标签栏被 Home 条遮挡传入useSafeAreaInsets()拿到的 insets 给safeAreaInsetsiOS 会自动加底部留白一般不用手动传shifting 动画没生效少于 2 个标签时组件会降级为普通模式并在控制台给出警告Menu 点了没反应十有八九是最外层少了PaperProviderAndroid 键盘弹起顶住标签栏给BottomNavigation.Bar打开keyboardHidesNavigationBar默认在 Android 开启。7. 下一步想让底部标签和 Appbar 支持深色模式阅读 docs/6.x/docs/guides/theming-with-react-navigation.md想动手把本文所有效果跑起来仓库里的示例工程 example/src/RootNavigator.tsx 就是Stack Appbar.Header的完整写法底部导航演示在 example/src/Examples/BottomNavigationExample.tsx。照着本文走一遍你的 App 就同时拥有了 Material 3 质感的顶部标题栏和底部标签栏——这正是 react-native-paper 与 React Navigation 集成的标准姿势。【免费下载链接】react-native-paperMaterial Design for React Native (Android iOS)项目地址: https://gitcode.com/gh_mirrors/re/react-native-paper创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考