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

Posted 2023-03-15

【中文标题】获取 React-Native sectionlist 中视口中的当前部分

【英文标题】：Getting the current section that is in the viewport in React-Native sectionlist

【发布时间】：2018-09-22 10:00:32

【问题描述】：

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

有什么解决办法吗？

【问题讨论】：

我的解决方案有效吗？

【参考方案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 的状态。