@react-navigation/stack和@react-navigation/native-stack有什么区别?



@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()

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

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

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

另一个并不是真正的"navigate",而是模仿JavaScript和通用视图中的导航(有点像"单页应用程序"网页应用模仿网页导航)。他们说,他们试图让它感觉像本地导航,但它可能不完全相同或性能。然而,它的可定制性将大大提高。您可以自定义页面之间的转换。使用原生方法,定制很多东西是不切实际甚至不可能的。你可以自定义的,你将需要为每个操作系统(Android, IOS)做一次,除非导航库提供了一种方法来定制你想要的,并处理操作系统的差异。


通常当人们想要制作跨平台应用时。在任何合理的情况下,他们倾向于采用基于javascript的解决方案。只有在绝对必要的时候才使用原生方法。react native让你能够使用本地api,这是一件很棒的事情。但是,使用本机方法迫使您还使用物理电话(或模拟器)来(正确地)测试这些功能。而所有基于web的内容都可以在浏览器中轻松测试,这对于开发速度来说往往要快得多。

从文档中,突出显示了最重要的内容:

此导航器使用iOS上的原生api UINavigationController和Android上的Fragment,因此使用createNativeStackNavigator构建的导航将与基于这些api构建的应用程序具有完全相同的行为和相同的性能特征。它还使用react-native-web提供基本的Web支持。

需要记住的一点是,当@react-navigation/native-stack提供原生性能时并暴露了原生功能,如iOS上的大标题等,它可能不像@react-navigation/stack那样可定制,这取决于你的需要。所以i如果你需要更多的定制在这个导航器中,可以考虑使用@react-navigation/stack这是一个基于JavaScript的更可定制的实现。

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

最新更新