React Native, помещающий фиксированный компонент поверх Flatlist

Первоначально компонент занимает верхнюю часть экрана

Компонент B занимает весь экран, я бы хотел использовать здесь FlatList

Как показано выше, я хочу создать этот экран из двух частей, на котором я могу щелкнуть как компонент A, так и компонент B в первом представленном здесь виде. Когда пользователь прокручивает компонент B, он может занимать весь экран и перемещаться по компоненту A. (Компонент не перемещается с FlatList).

Я новичок в реакции на родных и задавался вопросом, как я могу создать такое поведение? Я пробовал использовать абсолютное позиционирование и ListHeaderComponent внутри FlatList, но ничего не добился. Дайте мне знать, если у кого-нибудь есть идея.

Спасибо!


react-native react-native-flatlist
person Henry H    schedule 12.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я бы попробовал что-то вроде следующей структуры экрана:

View
  Image
  ScrollView w/ trans background that goes to the top of screen
    FlatList with top padding to push it below the image
      Items in list
    /FlatList
  /ScrollView
/View

Вы также можете увидеть, работает ли response-native-parallax-scroll-view для вас, поскольку он выглядит несколько похоже на то, что вы описываете

https://github.com/jaysoo/react-native-parallax-scroll-view

person Garrett McCullough    schedule 12.07.2017
comment
Спасибо, Гаррет, похоже, это может сработать визуально. Меня беспокоит только то, что ‹Image› не будет активным в этой структуре. Кроме того, как ведет себя компонент Flatlist, когда он находится внутри прокрутки? Я понимаю, что плоский список асинхронно создает свои элементы в списке, тогда как scrollview должен ждать, пока отобразятся все его дочерние элементы. Прокрутка + плоский список работает так же быстро, как плоский список? Я посмотрю на параллакс. - person Henry H; 13.07.2017
comment
Я не знаю никаких проблем с использованием FlatList внутри ScrollView. ScrollView теперь имеет возможность обрезать подвиды, которых нет в порту просмотра, поэтому я не ожидал никаких проблем с производительностью, но это стоит проверить. Вместо ScrollView вы также можете попробовать использовать прозрачный заголовок с фиксированной высотой в FlatList. - person Garrett McCullough; 14.07.2017
comment
@GarrettMcCullough Одна проблема с FlatList, вложенным в ScrollView, заключается в том, что вы всегда думаете, что достигли конца, и неоднократно запускаете onEndReached. - person Levsero; 06.12.2017