Телеграмм чат группы reactnative

Привет. Подскажите пожалуйста как реализовать следующую идею.
На экране есть header, под ним табы (MaterialTopTabNavigator) и в этих табах размещены FlatList'ы или просто статичный контент.

Нужно чтобы при скролле флатлистов или статичного контента, если он больше экрана, header уезжал вверх и выезжал обратно при обратном скролле.

Другими словами:
Как будто экран представляет из себя ScrollView, контент которого высотой в размер экрана + высота хедера. При скролле экрана сначала должен скроллится ScrollView, а потом, если конец скролла, должны скроллится другие скроллы, внутри внешнего ScrollView.

Пытался так и сделать, обернуть все в ScrollView с фиксированной высотой и внутри флатлисты тоже с фиксированной высотой. В итоге скроллится только внешний ScrollView.
А если заменить внешний ScrollView на FlatView, то такое же поведение и почему-то падал фпс.

Есть какие-нибудь идеи как это реализовать?

источник

10:44пожаловаться #7

I

Irakliy in React Native — русскоговорящее сообщество

Nikita

Привет. Подскажите пожалуйста как реализовать следующую идею.
На экране есть header, под ним табы (MaterialTopTabNavigator) и в этих табах размещены FlatList'ы или просто статичный контент.

Нужно чтобы при скролле флатлистов или статичного контента, если он больше экрана, header уезжал вверх и выезжал обратно при обратном скролле.

Другими словами:
Как будто экран представляет из себя ScrollView, контент которого высотой в размер экрана + высота хедера. При скролле экрана сначала должен скроллится ScrollView, а потом, если конец скролла, должны скроллится другие скроллы, внутри внешнего ScrollView.

Пытался так и сделать, обернуть все в ScrollView с фиксированной высотой и внутри флатлисты тоже с фиксированной высотой. В итоге скроллится только внешний ScrollView.
А если заменить внешний ScrollView на FlatView, то такое же поведение и почему-то падал фпс.

Есть какие-нибудь идеи как это реализовать?

если я правильно понял, то у скроллВью есть проп для этих целей

источник

10:47пожаловаться #8

I

Irakliy in React Native — русскоговорящее сообщество

Nikita

Привет. Подскажите пожалуйста как реализовать следующую идею.
На экране есть header, под ним табы (MaterialTopTabNavigator) и в этих табах размещены FlatList'ы или просто статичный контент.

Нужно чтобы при скролле флатлистов или статичного контента, если он больше экрана, header уезжал вверх и выезжал обратно при обратном скролле.

Другими словами:
Как будто экран представляет из себя ScrollView, контент которого высотой в размер экрана + высота хедера. При скролле экрана сначала должен скроллится ScrollView, а потом, если конец скролла, должны скроллится другие скроллы, внутри внешнего ScrollView.

Пытался так и сделать, обернуть все в ScrollView с фиксированной высотой и внутри флатлисты тоже с фиксированной высотой. В итоге скроллится только внешний ScrollView.
А если заменить внешний ScrollView на FlatView, то такое же поведение и почему-то падал фпс.

Есть какие-нибудь идеи как это реализовать?

кажись, вот это https://facebook.github.io/react-native/docs/scrollview#nestedscrollenabled

facebook.github.io

ScrollView · React Native

Component that wraps platform ScrollView while providing integration with touch locking "responder" system.

источник

10:49пожаловаться #9

I

Irakliy in React Native — русскоговорящее сообщество

Nikita

Привет. Подскажите пожалуйста как реализовать следующую идею.
На экране есть header, под ним табы (MaterialTopTabNavigator) и в этих табах размещены FlatList'ы или просто статичный контент.

Нужно чтобы при скролле флатлистов или статичного контента, если он больше экрана, header уезжал вверх и выезжал обратно при обратном скролле.

Другими словами:
Как будто экран представляет из себя ScrollView, контент которого высотой в размер экрана + высота хедера. При скролле экрана сначала должен скроллится ScrollView, а потом, если конец скролла, должны скроллится другие скроллы, внутри внешнего ScrollView.

Пытался так и сделать, обернуть все в ScrollView с фиксированной высотой и внутри флатлисты тоже с фиксированной высотой. В итоге скроллится только внешний ScrollView.
А если заменить внешний ScrollView на FlatView, то такое же поведение и почему-то падал фпс.

Есть какие-нибудь идеи как это реализовать?

а ещё тут можно глянуть
https://www.youtube.com/watch?v=pNw8lPdD4H4

YouTube

Spotify Scrollable Header - “Can it be done in React Native?”

In this video, we are looking at the Spotify scrollable header. I hope that you will enjoy the video! 😀 Let me know what you think. Wanna learn the fundament...

источник

10:49пожаловаться #10

N

Nikita in React Native — русскоговорящее сообщество

Irakliy

кажись, вот это https://facebook.github.io/react-native/docs/scrollview#nestedscrollenabled

facebook.github.io

ScrollView · React Native

Component that wraps platform ScrollView while providing integration with touch locking "responder" system.

Спасибо. Я это видел, но не помогло уже не помню почему, сейчас попробую воспроизвести.

источник

10:51пожаловаться #11

N

Nikita in React Native — русскоговорящее сообщество

Irakliy

а ещё тут можно глянуть
https://www.youtube.com/watch?v=pNw8lPdD4H4

YouTube

Spotify Scrollable Header - “Can it be done in React Native?”

In this video, we are looking at the Spotify scrollable header. I hope that you will enjoy the video! 😀 Let me know what you think. Wanna learn the fundament...

Это тоже видел)
Но нашел вариант попроще
https://www.skptricks.com/2019/06/react-native-scrollview-animated-header-example.html
Все очень усложняется из-за наличия табов и нескольких списков в них. Если бы скроллы работали так, как я мечтаю, то было бы намного проще..

SKPTRICKS - Programmer Hub

React Native ScrollView Animated Header Example

React Native ScrollView Animated Header Example. This tutorial explains how to create animation header in scrollview in react native application. You have noticed in many apps that a fixed height header is positioned on the top of the screen and a scrolling list is used underneath the header. When you start to scroll the list, the header collapses with nice smooth animation from current height to fixed min height based on scrolling list’s scroll value and sticks on the top of the screen.

источник

11:02пожаловаться #12

N

Nikita in React Native — русскоговорящее сообщество

А можно ли как-то перехватить скролл у ScrollView или VirtualizedList?

источник

11:02пожаловаться #13

А

Антон in React Native — русскоговорящее сообщество

кто нибудь юзал react-native-snap-carousel?
Есть глюки при слайдах больше 7 штук, начинает подвисать при перелистывании
Пытался сделать подгрузку когда дойдет до конца но возникают еще большие глюки

источник

11:02пожаловаться #14

N

Nikita in React Native — русскоговорящее сообщество

Nikita

А можно ли как-то перехватить скролл у ScrollView или VirtualizedList?

Поставить свой обработчик, который в зависимости от условий либо сам скроллится, либо передавать событие дальше своим чайлдам.

источник

11:03пожаловаться #15

N

Nikita in React Native — русскоговорящее сообщество

Антон

кто нибудь юзал react-native-snap-carousel?
Есть глюки при слайдах больше 7 штук, начинает подвисать при перелистывании
Пытался сделать подгрузку когда дойдет до конца но возникают еще большие глюки

Мб вот поможет
https://github.com/archriss/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#optimizing-performance
Возможно там внутри VirtualizedList и это тоже будет полезно
https://facebook.github.io/react-native/docs/optimizing-flatlist-configuration

GitHub

archriss/react-native-snap-carousel

Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS. - ar...