Question

Navigator＆amp;和Navigator之间的区别是什么？ React-Native中的ViewPagerAndroid组件？什么时候使用它们？似乎两者都可用于在应用程序的不同屏幕之间导航。

Answer 1

重要的是要了解React Native不是＆＃34;一次写入，在任何地方运行＆＃34;解。因此，它包含特定于平台的模块，仅包装iOS / Android本机可用的组件。

其中一个组件是 ViewPagerAndroid 。这只是包装了Android＆＃34; ViewPager＆＃34;组件并提供与本机使用ViewPager类似的功能。当您具有类似轮播的布局时，应使用此组件，其中多个视图水平布局，并且您希望在它们之间设置动画：http://i.stack.imgur.com/kPOic.png

Navigator 是一个跨平台的组件，可让您轻松切换屏幕上当前显示的内容。导航器没有层次结构或顺序的概念（与ViewPagerAndroid不同），您可以随时切换到任何其他视图。

Answer 2

ViewPagerAndroid 更多是用于标签的滑动组件。如果你更多地使用它，你会发现在某些情况下它可能是限制性的。

导航器可让您在屏幕/页面中进行推送/导航，并在堆栈中跟踪它。这里的导航器在transitions between scenes方面更加通用。它也适用于机器人上的硬件后退按钮。

例如，假设您有“发现”，“搜索”和“个人资料”的底部导航，但在“个人资料”屏幕中，您还可以看到“Feed”，“关注”和“关注者”标签。在此设置中，您将需要两个ViewPagerAndroid组件，这是不可能的。

这也是一个不好的用户体验，因为用户可能想要在关注者和关注者之间滑动，但会突然从配置文件扫描到搜索。

专业提示： 另一方面，Navigator组件可以在另一个中组合。这是我最初不知道并且正在努力的事情。我的应用程序通常包含两个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。

Navigator与ViewPagerAndroid相同

2 个答案: