React Native - разбиение списков списков в 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 reerender каждый раз для каждого ListView не будет вырезать его для приложения.

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Возможно, лучшим решением будет играть с ListView dataSource и onEndReached.

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