реагировать на нативную горизонтальную прокрутку прокрутки влево или вправо при касании

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

Но я хочу добавить больше жестов, когда пользователь нажимает влево или вправо (на расстоянии от края), он автоматически отображает жест замены. Как я могу это сделать?


person dev-jim    schedule 24.01.2018    source источник


Ответы (2)


Получите ref к <ScrollView>, затем к scrollToEnd() или используйте методы scrollTo - https://facebook.github.io/react-native/docs/scrollview.html#scrollto

Чтобы рассчитать номер страницы, вы должны использовать onLayout для расчета размеров ваших страниц. Если это ширина устройства, то это легко, просто используйте Dimensions.get('window').width, а затем передайте это x в scrollTo.

person Noitidart    schedule 25.01.2018
comment
спасибо за ответ, а можно поподробнее? Например, как я могу отслеживать жест касания на краю? - person dev-jim; 25.01.2018
comment
@dev-jim Чтобы проверить касание по краю, вам нужно поместить туда невидимый элемент для проверки касания. - person Noitidart; 25.01.2018
comment
Я разобрался. В любом случае спасибо за вашу помощь. Вы отвечаете, дайте мне вдохновение. Так что я приму это как правильный ответ. - person dev-jim; 25.01.2018
comment
Спасибо @dev-jim, поделитесь, пожалуйста, как вы это сделали. Это был невидимый элемент? И scrollTo метод? - person Noitidart; 25.01.2018

Я предполагаю, что ваш вид прокрутки выглядит так с реквизитами pagingEnabled и horizontal.

<ScrollView
   horizontal={true}
   pagingEnabled={true}
   onMomentumScrollEnd={event => {
      this.setState({xOffset: event.nativeEvent.contentOffset.x })
   }}>
      // Content 
</ScrollView>

Позиция может быть рассчитана с помощью:

this.state.xOffset/ DeviceSize.width

onMomentumScrollEnd вызывается каждый раз, когда вы прокручиваете элемент в ScrollView.

(в этом случае содержимое должно быть во всю ширину)

person Maxence Machu    schedule 17.10.2018