Navigator Vs ViewPagerAndroid

Question

В чем разница между Navigator & Компоненты ViewPagerAndroid в React-Native? А когда их использовать? Кажется, что оба могут использоваться для навигации между различными экранами приложения.

Answer 1

Важно понимать, что React Native не является решением «написать один раз, работать где угодно». Таким образом, он включает в себя модули, специфичные для платформы, и просто перенос компонента, доступного на iOS/Android.

Один из таких компонентов - ViewPagerAndroid. Это просто обертывает компонент «ViewPager» Android и обеспечивает аналогичную функциональность с использованием ViewPager. Этот компонент следует использовать, если у вас есть карусельного типа макет, в котором несколько представлений располагаются горизонтально, и вы хотите анимировать между ними: http://i.stack.imgur.com/kPOic.png

Navigator является компонентом кросс-платформа, которая позволяет переключать что в настоящее время отображается на экране легко. Навигатор не имеет понятия иерархии или порядка (в отличие от ViewPagerAndroid), и вы можете переключиться на любой другой вид в любое время.

Answer 2

ViewPagerAndroid - более прочный компонент для табуляции. Если вы используете его больше, вы обнаружите, что в некоторых случаях это может быть ограничением.

Навигатор позволяет вам перемещаться по экрану/страницам и с экрана и отслеживать их в стеке. Навигатор здесь более универсален с точки зрения transitions between scenes. Он также отлично работает с кнопкой назад на андроидах.

Например, скажем, что у вас есть нижняя навигационная панель «Поиск», «Поиск» и «Профиль», но в окне «Профиль» вы также должны иметь вкладки «Фид», «Следовать» и «Последователи». В этой настройке вам понадобятся две компоненты ViewPagerAndroid, ведь это невозможно.

Это также было бы плохой практикой UX, потому что пользователь мог бы пронестись между последователями и последователями, но внезапно удалился бы от профиля к поиску.

Pro tip: С другой стороны, компоненты Navigator можно комбинировать друг с другом. Это то, что я не знал изначально и с этим боролся. В моих приложениях обычно есть два компонента Navigator. Один для обработки вкладок между моими основными сценами (например, Discover, Search и Profile), которые загружаются в 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.