获取 React-Native sectionlist 中视口中的当前部分答案

【问题标题】：Getting the current section that is in the viewport in React-Native sectionlist获取 React-Native sectionlist 中视口中的当前部分
【发布时间】：2018-09-22 10:00:32
【问题描述】：

我想检测 react-native sectionlist 的哪个部分在视口中。

有什么解决办法吗？

【问题讨论】：

我的解决方案有效吗？

标签： android ios react-native

【解决方案1】：

这是你可以做的

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

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

【讨论】：

【解决方案2】：

假设该部分从状态的数据属性中提供其部分。

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}
/>

您必须计算包含renderedHeaders 在内的renderedItems 的总内容大小，并且在关于SectionList 的contentOffset 的onScroll 方法中，我们可以查看它是哪个部分。

假设您有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 的状态。

【讨论】：