Наличие нескольких элементов в заголовке FlatList

Есть ли способ передать массив элементов в FlatList без оболочки, чтобы позже я мог использовать stickyHeaderIndices = {[1]}, чтобы закрепить только второй элемент?

Я намерен создать не липкий заголовок вместе с липкой панелью инструментов и передать их компоненту.

Если я попытаюсь передать renderHeader как функцию в ListHeaderComponent, например

  renderHeader = () => {
    const { toolbar, header } = this.props;
    const arr = [header(), toolbar()];
    return arr;
  };

Я получаю

Invariant Violation: Invariant Violation: Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `VirtualizedList`.

Каким может быть альтернативный способ достижения такого поведения (т.е. иметь список, в котором закрепляется только второй заголовок?)

Другой подход, который я пробовал, заключался в объявлении scrollview с 3 дочерними элементами:

The non-sticky header
The toolbar
The flatlist itself

при установке stickyHeaderIndices = {[1]} в ScrollView.

Таким образом я получил желаемое поведение визуальной прокрутки (т.е. панель инструментов стала липкой). Однако при таком подходе у меня возникли проблемы с конфликтующими событиями между внешним просмотром прокрутки и внутренним плоским списком, поэтому я тоже не знаю, допустим ли это.

Пока что, как очень неприятный обходной путь, самый простой подход заключался в том, чтобы поместить 2 дополнительных элемента в массив данных, один для не липкого заголовка, а другой для липкой панели инструментов ({key: "_ header}, {key:" _ toolbar "} и обработать renderItemMethod так, чтобы я отображал их соответственно вместо моих обычных элементов. Таким образом, я мог бы установить stickyHeaderIndices для моего« второго элемента »с помощью stickyHeaderIndices = {[1]} (который на самом деле является панелью инструментов, которую мне нужно было установить как липкий в первую очередь) На экране работает как шарм. Однако по коду определенно воняет

Luiz Henrique Martins Lins Rol 05.08.2018 12:00
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
4
1
1 887
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте список разделов с 1 компонентом ListHeaderComponent и 1 разделом с липким заголовком. Я успешно делал это раньше.

Мой вопрос аналогичен собственному вопросу, но в моем случае я должен сделать первый заголовок липким. Возможно ли использование SectionList ... да как?

Siraj Alam 26.11.2019 14:23

Другие вопросы по теме