Question

我正在使用React-Native的SectionList组件来实现带有粘性节标题的列表。 我想将特殊样式应用于当前粘贴的部分标题。

我已经尝试了两种方法来确定哪个粘性标头当前是“粘性的”，但两种方法都没有起作用：

我尝试使用每个标题标题的onLayout道具来确定它们的y偏移量，并将其与SectionList onScroll事件结合使用来计算当前哪个标题标题“粘性”。
我尝试使用SectionList的{{1}}道具来确定哪个标头当前是粘性的。

方法＃1不起作用，因为传递给onViewableItemsChanged回调的event对象仅包含onLayout nativeEvent和height属性。方法＃2不起作用，因为width回调似乎是用不一致的数据调用的（最初，第一个标题标题被标记为可查看（它是），然后，一旦它变为“粘性”，它就是标记为不可查看，然后进一步滚动它是莫名其妙的标记为再次可见，而它仍然是“粘性的”[这最后的更新似乎是完全随意的]）。

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

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]);
    });
  };

什么SectionHeader是反应原生的粘性？

1 个答案: