React Native: вертикальный плоский список, вложенный в горизонтальный ScrollView, внутри вертикальный ScrollView - PullRequest
Новая
       83

React Native: вертикальный плоский список, вложенный в горизонтальный ScrollView, внутри вертикальный ScrollView

0 голосов
/ 14 июля 2020

Я знаю, что название звучит как кошмар, и это так. Вот то, что я надеюсь выполнить sh, но не могу это сделать в течение нескольких часов:

Экран имеет прокручиваемый заголовок (отсюда самый внешний ScrollView), который также прокручивает второй вложенный дочерний ScrollView. Горизонтальный FlatList предназначен для прокрутки разделов. Самый внешний ScrollView имеет липкий заголовок, который предназначен для навигации по горизонтальному ScrollView. Вот небольшой пример: 

    // This is just an example, this code won't run

    <ScrollView>
      <PageHeaderComponent/>
      <StickyHeader/> // Shows navigation within horizontal ScrollView
      <ScrollView horizontal={true} snapToInterval={SCREEN_WIDTH}>
        <FlatList
          style={{
            width: SCREEN_WIDTH
          }}
        />
        <FlatList
          style={{
            width: SCREEN_WIDTH
          }}
        />
      </ScrollView>
    </ScrollView>

Взгляните на эти два визуальных примера из приложения Twitter (пока не удается встроить изображения в строку) или попробуйте сами, если они у вас есть. Первый показывает «заголовок», о котором я говорю, от верхней части экрана до строки «следующие, подписчики». Второй показывает, как при прокрутке верхний заголовок прокручивается вверх вместе с остальной частью страницы, а при горизонтальной прокрутке появляются другие ScrollViews.

Не прокручиваемый профиль Twitter

Прокручиваемый (по горизонтали и вертикали) профиль Twitter

К сожалению, вертикальный FlatList внутри вертикального ScrollView удаляет все оптимизации FlatList и прерывает любые вызовы onEndReached .

Заранее благодарю за любую помощь.

...