Я пытаюсь реализовать дизайнерское решение, которое я пытался представить графически на изображении ниже:
Дизайн макета - (я пока не могу встраивать фотографии)
Описание дизайна:
[A] - Вид экрана, содержащий вертикальный список элементов (т. Е. ScrollView, FlatList)
[B] - Складной заголовок, содержащий горизонтальныйсписок предметов (то есть основную идею можно увидеть здесь: React Native Touch & Gesture - Krzysztof Magiera или Как я связал анимированные заголовки с позицией прокрутки в React Native )
[C] - Элемент списка из списка горизонтальной прокрутки [B], который при перетаскивании вниз должен перемещаться [D] к экрану и прилипать к низу.
[D] - Скрытый экран, который должен открываться, когда [C] перетаскивается вниз.
То, что я сделал
ScrollView, содержащий свертываемый заголовок, довольно легко реализовать, поскольку в Интернете много примеров.
Элемент просмотра горизонтальной прокрутки, который можетперетащить вниз ([C]) Я реализовал с помощью PanResponder , и все работает нормально.(было бы лучше после некоторой настройки :)).Существует аналогичный компонент, который можно перетаскивать снизу вверх: реагировать-нативный-перетаскиваемый вид
Проблемы, которые я пытаюсь решить
- Если я объединю эти два элемента вместе, я больше не смогу перетащить вниз [C], поскольку представление вертикальной прокрутки [A] обрабатывает все жесты.
- Я мог бы реализовать все, используя PanResponder , но потеря ScrollView здесь не была бы идеальной.
- Я думал о размещении [D] и [B] в одном ScrollView и установке смещения в качестве второго элемента в списке, но этого можно достичь толькочерез обратные вызовы и мерцания при рендеринге.
Наконец-то
Я пару дней обдумывал это и думал, что, может быть, у кого-то что-то естьаналогично тому, как это делается в их проектах, или лучше представляете, как этого можно достичь.
Любая помощь высоко ценится:)