Есть ли способ прокрутить компонент React-Native-Swiper? - PullRequest
Новая
       40

Есть ли способ прокрутить компонент React-Native-Swiper?

2 голосов
/ 20 февраля 2020

Я использую response-native-swiper как часть экранов On-Boarding, и как только пользователь проведет по 3 экранам приветствия, я хочу, чтобы они снова могли провести, и следующий экран, который они увидят, будет главный экран подачи, на котором они не могут провести назад.

1 Ответ

0 голосов
/ 17 марта 2020

Прежде всего вы должны использовать каскад навигаторов. Поскольку мы не хотим, чтобы пользователь возвращался обратно на экран регистрации с экрана входа в систему, мы должны использовать , чтобы переключить навигацию

. В вашем приложении. js файл, определите ваши маршруты, как это: 1006 *

Этот шаблон сначала открывает входящую страницу, которая содержит response-native-swiper, затем, когда он будет завершен, он переходит на экран входа в систему и входа в систему и после этого появляется домашний экран. Первые две страницы должны использовать сохраненное состояние, чтобы не отображаться, если пользователь уже прошел эти шаги. Это выходит за рамки этого вопроса.

AuthNavigation - другой навигатор, который будет отображаться после первой навигации. AuthNavigation управляет навигацией между экранами входа и регистрации. Теперь проблема заключается в том, как переключиться с Onboarding на AuthNavigation. Это просто, на последнем экране страницы Onboarding просто перейдите к AuthNavigation. После выполнения шага аутентификации аналогичным образом перейдите на главный экран. 

const Onboarding = props => {
  return (
    <View style={{ flex: 1 }}>
      <Swiper
        showsButtons
        loop={false}
        activeDotColor="black"
        dotColor="gray"
        buttonWrapperStyle={{
          justifyContent: 'flex-end',
          alignItems: 'flex-end',
          marginVertical: '6%'
        }}>
         <OnboardingPage
          mainContent={expensesImage}
          mainText="Main"
          subText="Sub"
          style={{ justifyContent: 'flex-end' }}
        />
        <OnboardingPage
          mainContent={socialImage}
          mainText="main"
          subText="Sub"
          onFinishPressed={() => props.navigation.navigate('AuthNavigation')}
        />
      </Swiper>
    </View>
  );
};
...