哪一种SectionHeader在反应上是粘稠的-本土化？

Question

我正在使用React本机的SectionList组件来实现一个带有粘性节头的列表。我想将特殊的样式应用到当前粘性的任何区段头上。

我尝试了两种方法来确定哪个粘性头当前是“粘稠的”，但这两种方法都没有奏效：

1. 我尝试使用每个节头的onLayout支柱来确定它们的y偏移量，并结合SectionList onScroll事件来计算哪个节标题当前是“粘着的”。
2. 我试着使用SectionList的onViewableItemsChanged道具来找出当前哪个头文件是粘性的。

方法1不能工作，因为传递给onLayout回调的onLayout对象只包含nativeEvent、height和width属性。方法2不起作用，因为onViewableItemsChanged回调似乎是用不一致的数据调用的(最初，第一节标题被标记为可查看(它是可查看的)，然后，一旦它变成“粘滞”，它就被标记为不可查看，然后随着进一步滚动，它又被莫名其妙地标记为可查看，而它仍然是“粘滞”的，这个最后的更新看起来完全是任意的)。

有人知道有效的解决方案吗？

Answer 1

在render()方法中创建stickyHeaderIndices数组时，应该首先创建一个对象。其中键是索引，值是该特定行的偏移，例如。{ 0: 0, 5: 100, 10: 200 }

  constructor(){
    super(props);
    this.headersRef = {};
    this.stickyHeadersObject = {};
    this.stickyHeaderVisible = {};
  }

  createHeadersObject = (data) => {
    const obj = {};
    for (let i = 0, l = data.length; i < l; i++) {
      const row = data[i];
      if (row.isHeaderRow) {
        obj[i] = row.offset;
      }
    }
    return obj;
  };

  createHeadersArray = data => Object.keys(data).map(str => parseInt(str, 10))

  render() {
    const { data } = this.props;
    // Expected that data array already has offset:number and isHeaderRow:boolean values
    this.stickyHeadersObject = this.createHeadersObject(data);
    const stickyIndicesArray = this.createHeadersArray(this.stickyIndicesObject);
    const stickyHeaderIndices = { stickyHeaderIndices: stickyIndicesArray };
  return (<FlatList
    ...
    onScroll={event => this.onScroll(event.nativeEvent.contentOffset.y)}

    {...stickyHeaderIndices}
    ...
    renderItem={({ item, index }) => {
            return (
                { // render header row
                  item.isHeaderRow &&
                      <HeaderRow
                        ref={ref => this.headersRef[index] = ref}
                      />
                }
                { // render regular row
                  item.isHeaderRow &&
                     <RegularRow />
                }
            );
          }}
  />)

那么你要监控的是电流偏移量比你的"titleRow“大

  onScroll = (offset) => {
    Object.keys(this.stickyHeadersObject).map((key) => {
     this.stickyHeaderVisible[key] = this.stickyHeadersObject[key] <= offset;
     return this.headersRef[key] && this.headersRef[key].methodToUpdateStateInParticularHeaderRow(this.stickyHeaderVisible[key]);
    });
  };