【问题标题】:Which is the best navigation method to manage stack in react-native?在 react-native 中管理堆栈的最佳导航方法是什么?
【发布时间】:2018-07-16 07:16:41
【问题描述】:

我使用过很少的 react 原生导航,但我仍然对使用哪个导航感到困惑,以便将来的观点也得到管理。我使用了 react-navigation,这是 react-native 和 react-native-router-flux 的默认设置,我也使用了 react-navigation,它有一个非常好的文档。但是太多的选择让我感到困惑。请帮忙,因为我的项目有点大,我不想在两者之间切换导航技术。

【问题讨论】:

  • 你需要先定义你的需求,你需要什么样的应用程序,它是一个页面到页面的层次结构还是一个标签视图或导航菜单等
  • 这是一个混合的。登录然后有导航抽屉的主屏幕。然后是标签视图和底页。

标签: android ios cordova react-native react-router


【解决方案1】:

我在我的项目中同时使用了react-native-navigationreact-native-router-flux,并在大型和正常大小的应用程序中体验了它们的行为。

总的来说,它们都是基于本机的导航库,易于集成 redux 支持。对于具有更多屏幕和更多填充内容的大型项目,我会推荐react-native-navigation。在文档中,它说:

React Native Navigation 提供 100% 原生平台导航 适用于 React Native 应用的 iOS 和 Android。

这意味着它将在导航方面提供 100% 的原生用户体验。 react-native-router-flux 也在后台使用 react-navigation,但是当您检查源代码时,您会发现原生端和 react-native 端之间有更多的 JavaScript 连接。它的实现是为了在两者之间增加一层以简化使用,并且在正常大小的项目中效果很好。但是随着尺寸变大,会导致性能变慢;因为不是直接调用原生动作,而是先去JavaScript桥接它。因此,在简单使用和性能之间进行权衡取决于您。

【讨论】:

    【解决方案2】:

    我在我的 react-native 项目中使用 react navigation 导航,我的这些是一些问题,但它是你能找到的最好的,并且使用 v2 他们解决了很多问题,并且它是 react native 推荐的,最近我尝试了react native navigation 100% 原生导航,跨平台界面,值得一看,但我没有在实际项目中使用过,所以现在我推荐你 react-navigation。

    【讨论】:

    • 嗨,迁移到 v2 容易吗?稳定吗?
    • 是的,迁移很容易,具体取决于导航的复杂程度
    【解决方案3】:

    您可以选择多个导航器。下面是一些正式包含在 React Native 文档中的导航器。

    NavigatorIOS 是 UINavigationController 的包装器,允许您实现导航堆栈。它的工作方式与使用 UINavigationController 在本机应用程序上的工作方式相同,提供与 UIKit 相同的动画和行为。 要设置导航器,请为 initialRoute 属性提供一个路由对象。路由对象用于描述您的应用导航到的每个场景。 initialRoute 表示导航器中的第一条路线。

    Navigator 与 NavigatorIOS 不同,Navigator 适用于 iOS 和 Android。 Navigator 只是 NavigatorIOS 的 JavaScript 实现。

    NavigationExperimental 旨在替代 Navigator。但由于缺乏文档,它也很快被放弃了。这里的另一个缺点是 NavigationExperimental 没有任何预定义的操作。您必须编写自己的操作。

    Ex-Navigation 是另一个在内部使用 NavigatorExperimental API 的导航器。在这里,用例更简单,还引入了预定义的功能。

    React Native Router Flux 构建在 NavigationExperimental 之上,并被许多开发人员使用。它也很容易理解,它有强大的社区支持。唯一的缺点是定义各种路线有时会变得复杂。

    React Navigation 的创建是因为需要一种可扩展但易于使用的导航方法,React Navigation 可以在 React 以及 React Native 项目中使用,允许更高程度的共享代码。

    React Native Navigation 是可用的最佳导航库之一。它在 iOS 和 Android 上为 React Native 应用程序提供了一个完全原生的平台导航。这里的 JavaScript API 非常简单且跨平台。React Native Navigation 带有可选的 redux 支持。

    【讨论】:

      【解决方案4】:

      确实,我们在 8 个月前就有了用于导航的 react-native-router-flux,但我们在导航到另一个组件时遇到了很多问题。

      虽然我们已经为路由实现了 react-navigation,然后我们实现了 tab 动画页面之间的平滑路由,控制了组件从下到上的渲染和反之亦然,同时防止页面之间不必要的路由。

      我更喜欢:react-navigation。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2018-12-09
        • 2017-03-15
        • 2022-07-23
        • 2020-12-07
        • 1970-01-01
        • 1970-01-01
        • 2019-02-16
        相关资源
        最近更新 更多