Получение текущего раздела, который находится в области просмотра в React-Native sectionlist

Question

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

Есть ли какое-нибудь решение?

Answer 1

Предположим, что этот раздел содержит разделы из данных состояния.

state = { data: [...], contentSizeData: [], currentSection: 0 }

И предположим, что ваш SectionList такой.

<SectionList
  onScroll={event => {    
     for (var _i = 0; _i < this.state.contentSizeData.length; _i++) {
      if (event.nativeEvent.contentOffset.y < this.state.contentSizeData[_i]) {
           this.setState({ currentSection: _i });
           break;
          }
       }
    }}
    renderItem={({ item, index, section }) => {
      <ItemComponent />
    }}
    renderSectionHeader={({ section }) => {
      <HeaderComponent />
    }}
    sections={this.state.data}
/>

Вы должны вычислитьразмер содержимого всего renderedItems с учетом renderedHeaders и в методе onScroll относительно contentOffset из SectionList мы можем проверить, что это за раздел.

Предположим, что у вас есть 2 sectionsкоторый имеет 3 items с headers.Каждый renderedItem имеет высоту 100, а заголовки имеют высоту 20, что похоже на пример снизу.

Тогда у вас естьсоздать логику с циклом, который вычисляет размеры содержимого каждого раздела (вычисляет высоту каждого раздела с учетом заголовка)

    var _sizeArr = []
    for(var _iter = 0; _iter < this.state.data.length; _iter++){
      let cellsHeight = this.state.data[_iter].length * 100;
      let headerHeight = 20;
      var totalHeight = cellsHeight + headerHeight;
      if(_iter != 0){
         _sizeArr.push(totalHeight + _sizeArr[_iter-1]); 
      }else{
         _sizeArr.push(totalHeight); 
      }
     }
   this.setState({ contentSizeData: _sizeArr })

Давайте посмотрим на высоту раздела

Дляпервый 20 (компонент заголовка) + 3 * 100 (компонент элемента) => 320

и второй 20 (компонент заголовка) + 3 * 100 (компонент элемента) => 320

В массиве this.state.contentSizeData имеется 2 высоты, например [320, 640].Второй содержит собственную высоту секции и высоту секции, которая перед собой.Это означает, что мы используем SectionList onScroll метод с просмотром contentOffset.y, и мы можем проверить, что если SectionList's y position находится между [0 - 320], значит, он в Section 0, а если нет, повторять цикл и проверять егомежду [320 - 640], если это так, то в Section 1.

onScroll = {event => {
    for (var _i = 0; _i < this.state.contentSizeData.length; _i++) {
       if (event.nativeEvent.contentOffset.y < this.state.contentSizeData[_i]) {
           this.setState({ currentSection: _i });
           break;
        }
    }
}}

Когда вы прокручиваете SectionList, он вызывает метод onScroll, и вы можете видеть currentSection в состоянии.

Answer 2

Это то, что вы можете сделать

  render () {
    return (
      <SectionList
        onViewableItemsChanged={(data) => this.onCheckViewableItems(data)}
        viewabilityConfig={{
          itemVisiblePercentThreshold: 50 //means if 50% of the item is visible
        }}
      />
    )
  }

onCheckViewableItems = ({ viewableItems, changed }) => {
        console.log("Visible items :", viewableItems)
      }