Я хотел бы иметь набор вкладок, каждая из которых имеет FlatList внутри ScrollView.Это похоже на макет Instagram или Twitter.
Мне известно, что существуют некоторые проблемы с наличием FlatList внутри ScrollView и получением onEndReached для запуска, поскольку регистрируются только события прокрутки ScrollView?
Это приводит к тому, что внутренний onEndReached вызывается сразу при загрузке, а затем снова и снова ...
Если вы сделаете ScrollView scrollEnabled false и flex: 1 вместо flexGrow: 1тогда вы можете заставить внутренние FlatLists прокручивать, но внешнее содержимое не ... Это выглядит так:
Я думаю, что есть многолюди, которые борются с этой проблемой, и я нигде не могу найти действительно ясного решения.
Я также пытался реализовать react-navigation-collapsible с createMaterialTopTabNavigator для создания вкладок.Тем не менее, вы не можете реализовать функцию «pull-to-refresh» на весь экран?
Любая помощь будет высоко ценится.
Обновление
Я также рассмотрел реализацию: FlatList внутри ScrollView не прокручивается
И ярассматривал динамическое переключение свойства scrollEnabled (даже если оно создает повторную визуализацию. Это ПОЧТИ работает ... но есть проблема с высотой ScrollView, равной flexGrow: 1, а внутренняя FlatList не заполняет пространство ...
ВТОРОЕ ОБНОВЛЕНИЕ
Эта закуска почти делает правильные вещи ... https://snack.expo.io/@satya164/collapsible-header-with-tabview Она использует react-native-tab-view и сворачивает заголовок с помощью анимации. Если заголовокбыл компонентом, он мог извлекать данные при загрузке, но вы могли получить только обновление для внутреннего списка (в отличие от Instagram).
Вопросы, связанные с данной:
Существует проблема с бесконечным вызовом onEndReached - https://github.com/facebook/react-native/issues/18887 - https://github.com/facebook/react-native/issues/6002
FlatList не может работать прямо внутри ScrollView ... - https://github.com/facebook/react-native/issues/12827#issuecomment-320509824
Плоский список внутри ScrollView- https://github.com/facebook/react-native/issues/19971
FlatList внутри ScrollView не прокручивается - https://github.com/facebook/react-native/issues/19971
Ребенок FlatList вызывает onEndReached при рендеринге - https://github.com/react-native-community/react-native-tab-view/issues/501
Реагирует на собственные вложенные списки Триггеры onEndReached несколько раз - Реагирует на собственные вложенные списки Триггеры onViewReached несколько раз при загрузке
Когда FlatList обернут внутри ScollView, onEndReached не работает.- https://github.com/facebook/react-native/issues/22008
Twitter-подобный макет профиля - Как создать Twitter-подобный макет профиля? Но я считаю, что ответ теперь не верный.