Logo

菜单

发布于 2026-01-06 3 阅读
0

React Navigation 6.x

React Navigation 6.x

各位开发者好！让我们来看看 React Navigation 6.x 的新特性。

要点 -

  • 安装
  • 现在导航时会覆盖参数，而不是合并参数。
  • 默认情况下，iOS 中的模态框使用演示样式，而 Android 中的模态框使用滑动动画。
  • iOS 上的抽屉现在默认使用滑动动画。
  • 抽屉和底部标签页默认显示标题，无需再添加堆栈导航器
  • Material Top Tabs 现在采用基于 ViewPager 的实现，带来原生体验。
  • 具有丰富功能组件的 UI 元素库，可用于 React 导航

安装

React Navigation 6 的最低要求
是至少需要 .react-native@0.63.0.如果您使用的是 Expo，则您的 SDK 至少需要41.

NPM

npm install @react-navigation/native@next @react-navigation/stack@next
Enter fullscreen mode Exit fullscreen mode

纱

yarn add @react-navigation/native@next @react-navigation/stack@next
Enter fullscreen mode Exit fullscreen mode

React Navigation 使用了一些核心工具，这些工具被导航器用来在应用程序中创建导航结构。

需要安装以下库 -

react-native-gesture-handler
react-native-reanimated
react-native-screens 
React-native-safe-area-context
Enter fullscreen mode Exit fullscreen mode

安装依赖项 -
NPM

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context
Enter fullscreen mode Exit fullscreen mode

纱

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context
Enter fullscreen mode Exit fullscreen mode

从 React Native 0.60 及更高版本开始，链接是自动的。因此，您无需运行react-native link。

如果你使用的是 Mac 电脑，并且正在为 iOS 开发应用，则需要安装 pods（通过 Cocoapods）来完成链接。

npx pod-install ios

部分库的旧版本已不再受支持， React Navigation 需要以下库的较新版本：

react-native-safe-area-context >= 3.0.0
react-native-screens >= 2.15.0
react-native-tab-view >= 3.0.0
react-native >= 0.63.0
expo - 40+ (if you use Expo)
Enter fullscreen mode Exit fullscreen mode

推荐 -保护 React Native 应用程序

现在导航时会覆盖参数，而不是合并参数 -

当导航到现有组件/屏幕时，参数会从初始版本合并。例如，假设存在一个文章屏幕，其参数如下：

{
  "articleTitle": "React Navigation",
  "articleBody": "Top React Navigation Library"
}
Enter fullscreen mode Exit fullscreen mode

当您使用 navigation.navigate 进行导航时("Article", { "articleTitle": "Smart Home"})，在参数合并后，它将看起来像这样

{ 
  "articleTitle": "Smart Home", 
  "articleBody": "Top React Navigation Library"
}
Enter fullscreen mode Exit fullscreen mode

因此，合并行为在某些情况下很有用，但在其他情况下则会带来问题。在 React Navigation 6 中，不再默认使用合并，而是会被覆盖。如果您需要合并参数，可以通过显式地设置 `merge: true` 来实现，如下所示：

navigation.navigate({
  name: “Article”,
  params: { articleTitle: 'Smart Home' },
  merge: true,
});
Enter fullscreen mode Exit fullscreen mode

推荐 -十大 React Hooks 库

默认情况下，iOS 中的模态框使用演示样式，而 Android 中的模态框使用滑动动画。

iOS -
mode="modal" 被移除，改为 presentation: "modal"，新的 presentation 选项允许开发者自定义屏幕是模态的还是屏幕（基本）。

iOS 具有presentation: "modal" - 这会显示 iOS 13 中引入的全新模态视图。它还会自动管理标题栏中的状态栏高度，而这在以前通常是我们手动设置的。

Android -
之前 Android 系统中没有模态框动画，但现在新增了底部滑动动画。如果您不想使用新的动画效果，可以在动画相关选项中进行更改。

新增功能：“transparentModal”选项，方便构建透明模态框。开发者可以在同一堆栈中混合使用常规屏幕和模态屏幕。

推荐 -如何提高 React Native 应用的性能？

iOS 上的抽屉默认使用滑动动画效果 -

安装 -
NPM

npm install @react-navigation/drawer@next
Enter fullscreen mode Exit fullscreen mode

纱

yarn add @react-navigation/drawer@next
Enter fullscreen mode Exit fullscreen mode

基于 Reanimated Library v2 有一个新的实现，如果该实现不可用，则会使用旧的实现。要强制使用旧的实现，请使用 `-` 参数useLegacyImplementation={true}到 Drawer.Navigator。

iOS 默认使用滑动动画，如果您仍想保留之前的行为，可以drawerType: "front"在 screenOptions 中进行指定。

抽屉式导航器和底部标签页默认显示标题，无需再添加堆栈导航器 -

TabScreen 和 Drawer 现在默认显示类似于 Stack Navigation 屏幕的标题栏。

如果您希望之前的行为不再保留标题，则可以在 screenOptions 中使用 headerShown: false。

Material Top Tabs 现在采用基于 ViewPager 的实现方式，提供原生体验 -

安装
NPM

npm install @react-navigation/material-top-tabs@next react-native-pager-view
Enter fullscreen mode Exit fullscreen mode

纱

yarn add @react-navigation/material-top-tabs@next react-native-pager-view
Enter fullscreen mode Exit fullscreen mode

依赖项react-native-tab-view已升级到最新版本 (3.x)，现在使用react-native-pager-viewReanimated 和 Gesture Handler 代替。与底部标签页类似，tabBarOptions 属性已被移除，其选项已移至屏幕选项中。

之前lazyprops 是在堆栈级别设置的，现在改为针对 Material Top Tabs 的延迟屏幕配置。

具有丰富功能组件的 UI 元素库，可用于 React Navigation -

React Navigation 新增了一个包含多个与导航相关的 UI 元素的包，例如 Header、Header Title、Header Background Component 等等。因此，开发者可以在所有导航中使用这些组件。

安装
NPM

npm install @react-navigation/elements@next react-native-safe-area-context
Enter fullscreen mode Exit fullscreen mode

纱

yarn add @react-navigation/elements@next react-native-safe-area-context
Enter fullscreen mode Exit fullscreen mode

进口

import { useHeaderHeight } from '@react-navigation/elements';
Enter fullscreen mode Exit fullscreen mode

探索元素库了解更多详情！

感谢阅读博客！

KPITENG | 数字转型
www.kpiteng.com/blogs | hello@kpiteng.com
联系我们 | 关注我们 - LinkedIn | Facebook | Instagram

文章来源：https://dev.to/kpiteng/react-navigation-6-x-29m8
软件如何存在种族歧视（以及你可以采...
内向者闲聊指南