React Native — нумерация ListViews в ScrollView?

У меня есть 3 компонента ListView внутри одного компонента ScrollView, например:

<ScrollView>
  <Header />
  <ListView onEndReached={() => alert('load more 1')}/>
  <ListView onEndReached={() => alert('load more 2')}/>
  <ListView onEndReached={() => alert('load more 3')}/>
  <Footer />
</ScrollView>

Компонент Header имеет некоторое общее содержимое, а также имеет 3 вкладки, которые вызывают отображение соответствующих ListView

Проблема в том, что любой ListView с onEndReached={() => alert('load more 1')} никогда не запускает оповещение, поэтому я никогда не могу загрузить больше, когда прокручиваю вниз и дохожу до конца списка. Удалите обертку ScrollView, и оповещение запустится, но обычное Header не прокручивается, так как мы только что удалили обертку ScrollView. Заголовок должен прокручиваться вместе со списком, поэтому я завернул все, что нужно прокручивать, в файл ScrollView.

ВАЖНОЕ ПРИМЕЧАНИЕ. Я не могу использовать ListView с renderHeader={this.header} для этого сценария. Потому что, несмотря на то, что Header будет прокручиваться, он будет перерисовывать общий Header и 3 вкладки для каждого ListView каждый раз, когда ListView рендерится, а не один раз. Таким образом, новый Header повторный рендеринг каждый раз для каждого ListView не поможет приложению.

Ищете решение этой проблемы, когда Header прокручивается со списками, а onEndReached запускается для видимого ListView.


react-native react-native-scrollview react-native-listview
person Wonka    schedule 11.08.2016    source источник
comment
Нужно ли вообще анимировать вкладки заголовков при переключении между ними (например, в примере показана анимация верхней и нижней строк)   -  person Luke Rhodes    schedule 07.09.2016
comment
Кроме того, если вам не нужен заголовок для анимации - почему для вас проблема, если заголовок повторно отображается в каждом ListView, пока состояние сохраняется?   -  person Luke Rhodes    schedule 07.09.2016
comment
@Luke Rhodes Нет необходимости анимировать заголовок при переключении, но я не хочу, чтобы заголовок повторно отображался для каждого представления списка при изменении вкладки, потому что при повторном отображении он показывает белым, где находится заголовок, но только внизу части (listview) - это то, что должно измениться вместе с выбранной соответствующей вкладкой.   -  person Wonka    schedule 07.09.2016

Ответы (3)


arrow_upward
2
arrow_downward

Я думаю, вам придется решить эту проблему, изменив источник данных в каждом listView в ответ на то, какой элемент заголовка выбран, вместо загрузки трех разных ListView.

getInitialState() {
    return {
        currentList: this.ds.cloneWithRowsAndSections(INITIAL_DATA);
    }
},
render() {
    return <ListView renderHeader={this._renderHeader} dataSource={this.state.currentList}/>
}

Единственная причина, по которой вы не захотите этого делать, - это если вы хотите сохранить позицию прокрутки в трех подчиненных ListView, но это не будет полезно, потому что вам всегда нужно прокручивать вверх, чтобы изменить, какой ListView вы ищете в любом случае.

Затем в вашей функции _renderHeader вы должны отобразить селектор, который заполняет currentList различными данными в зависимости от выбранного заголовка.

person frank    schedule 06.09.2016
comment
Да! Заголовок теперь прокручивается вместе с содержимым, загружается больше, когда я добираюсь до конца, и заголовок не мигает белым цветом при повторном отображении списка. Отличное решение! Спасибо, Фрэнк :) - person Wonka; 07.09.2016

arrow_upward
0
arrow_downward

В стилях вы можете установить его положение как относительное с top:0 и left:0 . Таким образом, он останется статичным сверху.

<View>
<Header style={{position:"relative",top:0,left:0,height:30,width:Dimensions.get("window").width}} />
  <ListView />
  <ListView />
  <ListView />
 <Footer />
 </View>

Второй вариант, который может работать в режиме прокрутки, — указать высоту для всех трех ListView.

person while1    schedule 11.08.2016
comment
Спасибо за ответ, пока1. Вариант 1 не будет прокручивать Header, я думаю, поскольку он не находится в ScrollView, и мне нужно, чтобы заголовок прокручивался при прокрутке вниз. Я имел в виду под статическим, что он не должен перерисовываться, но все же прокручиваться вместе с телом. Вариант 2, это динамический размер и загружается больше по ходу, поэтому не уверен, как там будут работать высоты. - person Wonka; 11.08.2016

arrow_upward
0
arrow_downward

Возможно, вы можете использовать ScrollView::onScroll, но это будет немного хакерски. Вам нужно будет знать размер ваших списков.

Работать только с ListView

Возможно, лучшим решением будет поиграть с источником данных ListView и функцией onEndReached.

Если вы обновите свой набор данных при запуске ListView::onEndReached, я думаю, вы можете добавить больше элементов в свой ListView. Таким образом, вам не нужно делать хакерские вещи с ListViews в ScrollViews.

person Julien Deniau    schedule 06.09.2016
comment
Проблема в том, что это может быть динамическая высота элементов представления списка (может быть немного разная высота для каждого элемента), поэтому решение должно быть гибким. Работа только со списками также не приведет к прокрутке заголовка, см. Важное примечание о проблеме повторного рендеринга заголовка при использовании только списков. - person Wonka; 07.09.2016