@react-navigation/stack 与 @react-navigation/native-stack 有什么区别？

Question

@react-navigation/stack与@react-navigation/native-stack有什么区别？

@react-navigation/stack 是否仅适用于 React 应用程序，而 @react-navigation/native-stack 仅适用于 React Native 应用程序？

• @react-navigation/stack - 每周下载 301,111 次
• @react-navigation/native-stack - 每周 24,830 次下载

import { createStackNavigator } from '@react-navigation/stack'
const Stack = createStackNavigator()

import { createNativeStackNavigator } from '@react-navigation/native-stack'
const Stack = createNativeStackNavigator()

Answer 1

Native Stack 使用 Android 和 IOS 本机导航系统在页面之间导航。

\n

本机堆栈导航器\n https://reactnavigation.org/docs/native-stack-navigator/

\n

堆栈导航器\n https://reactnavigation.org/docs/stack-navigator/

\n

另一种并不真正“导航”，而是模仿 JavaScript 和通用视图中的导航（有点像“单页应用程序”Web 应用程序模仿 Web 导航的方式）。他们说他们试图让它感觉像本机导航，但它可能不完全相同或性能不高。然而，它将更加可定制。您可以自定义页面之间的转换。使用本机方法，定制很多东西是不切实际甚至不可能的。您可以自定义的内容，您需要为每个操作系统（Android、IOS）执行一次，除非导航库提供了一种自定义您想要的内容并处理操作系统差异的方法。

\n\n

通常当人们想要制作跨平台应用程序时。只要明智，他们就会倾向于基于 JavaScript 的解决方案。仅在绝对必要时才使用本机方法。React Native 让您能够利用本机 api，这真是太棒了。但是使用本机方法迫使您还使用物理手机（或模拟器）来（正确地）测试这些功能。而基于网络的所有内容都可以在浏览器中轻松测试，这对于开发速度来说往往要快得多。

\n

Answer 2

从文档中，强调了最重要的事情：

该导航器在 iOS 上使用本机 API UINavigationController，在 Android 上使用 Fragment，因此使用 createNativeStackNavigator 构建的导航将与在这些 API 之上本机构建的应用程序的行为完全相同，并具有相同的性能特征。它还使用react-native-web 提供基本的Web 支持。

需要记住的一件事是，虽然@react-navigation/native-stack 提供本机性能并公开本机功能，例如 iOS 上的大标题等，但根据您的需求，它可能不像 @react-navigation/stack 那样可定制。因此，如果您需要比此导航器中更多的自定义功能，请考虑使用 @react-navigation/stack - 这是一个更可自定义的基于 JavaScript 的实现。

来源： https: //reactnavigation.org/docs/stack-navigator/