React Native ScrollView с нумерацией страниц + отображение части следующей страницы

Я пытаюсь создать интерфейс, в котором карты представляются пользователю по одной. Пользователь может прокручивать влево и вправо в постраничном режиме. Я также хочу просмотреть небольшое количество карты слева и справа от текущей карты, как намек на то, что есть еще что посмотреть. Очень грубый пример:

введите здесь описание изображения

Текущий код:

<ScrollView
   style={{width: Dimensions.get('window').width, height: 300}}
   horizontal={true}
   pagingEnabled={true}
   showsHorizontalScrollIndicator={false}
   alwaysBounceHorizontal={false}
   automaticallyAdjustContentInsets={false}>
    <View style={{width: 200, height: 300}}></View>
    <View style={{width: 200, height: 300}}></View>
    <View style={{width: 200, height: 300}}></View>
 </ScrollView>

react-native react-native-ios javascript
person Giffo    schedule 10.08.2017    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Я думаю, что мой ответ на этот ТАК вопрос может вам помочь.

Подводя итог, вы можете создать такой макет с помощью ScrollView или, что еще лучше, FlatList. Тем не менее, есть две сложные части:

  • Эффект привязки, для которого можно использовать реквизиты snapToInterval и snapToAlignment. К сожалению, они только для iOS.

  • Анимация неактивных слайдов, для которой требуется много пользовательской логики.

Мы с коллегой создали плагин, отвечающий этой конкретной потребности. В итоге мы открыли исходный код, поэтому можете попробовать: react-native-snap-carousel .

Плагин теперь построен поверх FlatList (версии >= 3.0.0), что отлично подходит для обработки огромного количества элементов. Он обеспечивает предварительный просмотр (эффект, который вам нужен), эффект привязки для iOS и Android, параллаксные изображения, поддержку RTL. сильный> и многое другое.

Вы можете взглянуть на витрину, чтобы понять, что может быть достигнуто с его помощью. Не стесняйтесь делиться своим опытом работы с плагином, так как мы всегда стараемся его улучшить.

react-native-snap-carousel витрина Archrissreact-native-snap-carousel Archriss Aix

Изменить: были представлены два новых макета. в версии 3.6.0 (один с эффектом стопки карт, а другой с эффектом трута). Наслаждаться!

react-native-snap-carousel layout stackreact-native-snap-carousel макет тиндера

person bend    schedule 10.08.2017
comment
Все хорошо, но долгое смахивание прокручивает несколько элементов, это отличается от pagingEnabled до ScrollView - person Giffo; 11.08.2017
comment
Да, пришлось внести некоторые изменения, так как ScrollView имеет целая куча ограничений. Тем не менее, установка реквизита scrollEndDragDebounceValue на 0 может помочь в этом. Вы также можете поиграть с реквизитом ScrollView decelerationRate (только для iOS) . - person bend; 11.08.2017
comment
Я думаю, что версия 3.2.1 ближе к тому, что вы ожидали. Обратите внимание, что я собираюсь работать над реализацией пользовательского скроллера поверх FlatList, чтобы лучше настроить ощущение карусели и обеспечить богатые взаимодействия. - person bend; 15.09.2017