Navigator VS ViewPagerAndroid

Question

Navigator & React-Native中的ViewPagerAndroid组件有什么区别？何时使用它们？ 似乎都可以用于在应用程序的不同屏幕之间导航。

Answer 1

重要的是要明白，React Native不是“一次写入，随处运行”的解决方案。因此，它包含特定于平台的模块，并且仅包装本机在iOS/Android上可用的组件。

一个这样的组件是ViewPagerAndroid。这只是包装了Android的“ViewPager”组件，并提供了类似的功能来本地使用ViewPager。当你有一个旋转木马般的布局，其中多个视图是水平放置该组件时，应使用，你希望他们之间的动画：http://i.stack.imgur.com/kPOic.png

导航是一个跨平台组件，允许你切换什么目前显示在屏幕上很容易。导航器没有阶层或顺序的概念（与ViewPagerAndroid不同），您可以随时切换到任何其他视图。

Answer 2

ViewPagerAndroid更像是一个用于Tab键的轻扫组件。如果你更多地使用它，你会发现在某些情况下它可能会受到限制。

导航器可以让您按下/导航到屏幕/页面和从屏幕/页面导航并在堆栈中跟踪它。此处的导航器在transitions between scenes方面更具多功能性。它也可以很好地与Android上的硬件后退按钮搭配使用。

例如，假设您有发现，搜索和配置文件的底部导航，但是在配置文件屏幕中，您还可以选择Feed，关注和关注者。在这个设置中，你需要两个ViewPagerAndroid组件，这是不可能的。

这也将是一种糟糕的用户体验实践，因为用户可能想要在“关注者”和“关注”之间进行滑动，但会突然从“要搜索的配置文件”中滑落。

专业提示： 另一方面，导航器组件可以相互组合。这是我最初并不知道的事情，并且一直在努力。我的应用程序中通常有两个Navigator组件。一个用于处理启动时加载到TabNavigator中的我的主要场景（例如发现，搜索和配置文件）之间的选项卡。我使用jumpTo和自定义转换configureScene在它们之间导航。

configureScene(route, routeStack) { //- this all is a hacky way to make no transitions 
    var NoTransition = { 
     opacity: { 
      value: 1.0, 
      type: "constant", 
     }, 
    }; 

    return { 
     ...Navigator.SceneConfigs.FadeAndroid, 
     gestures: null, 
     defaultTransitionVelocity: 1000, 
     animationInterpolators: { 
      into: buildStyleInterpolator(NoTransition), 
      out: buildStyleInterpolator(NoTransition), 
     }, 
    }; 
} 

这样用户可以主场景与进步之间跳转/在每个场景变化不会丢失（如向下滚动列表）就像ViewPagerAndroid。然后，我使用其他的MainNavigator导航来推送和弹出Single等单个场景（显示列表中的某种内容）。 MainNavigator的第一个或最初的场景是TabNavigator。