1. 别人的资料

• 资料1: 这一篇必看: scrollToLocation和getItemLayout - 会开花的树 - CSDN博客
• 资料2: 官方SectionList文档: SectionList · React Native
• 资料3: 最重要的github库: jsoendermann/rn-section-list-get-item-layout: Easy getItemLayout props for react-native SectionLists.

2. 看完了必看资料1,2,3后

因为资料3中提到的sectionListGetItemLayout只有一个类且是一个.ts文件在我们的.js工程里并不支持,所以稍微改造一下sectionListGetItemLayout这个类的index.ts,改造成下面的SectionListGetItemLayout .js

export default (parameters) => (data, index) => {
  let i = 0
  let sectionIndex = 0
  let elementPointer = { type: 'SECTION_HEADER' }
  let offset =
    typeof parameters.listHeaderHeight === 'function'
      ? parameters.listHeaderHeight()
      : parameters.listHeaderHeight

  while (i < index) {
    switch (elementPointer.type) {
      case 'SECTION_HEADER': {
        const sectionData = data[sectionIndex].data

        offset += parameters.getSectionHeaderHeight(sectionIndex)

        // If this section is empty, we go right to the footer...
        if (sectionData.length === 0) {
          elementPointer = { type: 'SECTION_FOOTER' }
          // ...otherwise we make elementPointer point at the first row in this section
        } else {
          elementPointer = { type: 'ROW', index: 0 }
        }

        break
      }
      case 'ROW': {
        const sectionData = data[sectionIndex].data

        const rowIndex = elementPointer.index

        offset += parameters.getItemHeight(sectionData[rowIndex], sectionIndex, rowIndex)
        elementPointer.index += 1

        if (rowIndex === sectionData.length - 1) {
          elementPointer = { type: 'SECTION_FOOTER' }
        } else {
          offset += parameters.getSeparatorHeight(sectionIndex, rowIndex)
        }

        break
      }
      case 'SECTION_FOOTER': {
        offset += parameters.getSectionFooterHeight(sectionIndex)
        sectionIndex += 1
        elementPointer = { type: 'SECTION_HEADER' }
        break
      }
    }

    i += 1
  }

  let length
  switch (elementPointer.type) {
    case 'SECTION_HEADER':
      length = parameters.getSectionHeaderHeight(sectionIndex)
      break
    case 'ROW':
      const rowIndex = elementPointer.index
      length = parameters.getItemHeight(
        data[sectionIndex].data[rowIndex],
        sectionIndex,
        rowIndex,
      )
      break
    case 'SECTION_FOOTER':
      length = parameters.getSectionFooterHeight(sectionIndex)
      break
    default:
      throw new Error('Unknown elementPointer.type')
  }

  return { length, offset, index }
}

相比原来的index.ts注释掉了关于类型声明的部分参数传入使用parameters对象. 用法上, 除了导包使用了import .js之外其余的和原来一样. 一下是改造后的用法:

import SectionListGetItemLayout from './SectionListGetItemLayout';

class MyComponent extends React.Component {
  constructor(props) {
    super(props)

    this.getItemLayout = sectionListGetItemLayout({
      // The height of the row with rowData at the given sectionIndex and rowIndex
      getItemHeight: (rowData, sectionIndex, rowIndex) => sectionIndex === 0 ? 100 : 50,

      // These four properties are optional
      getSeparatorHeight: () => 1 / PixelRatio.get(), // The height of your separators
      getSectionHeaderHeight: () => 20, // The height of your section headers
      getSectionFooterHeight: () => 10, // The height of your section footers
      listHeaderHeight: 40, // The height of your list header
    })
  }

  render() {
    return (
      <SectionList
        {...otherStuff}
        getItemLayout={this.getItemLayout}
      />
    )
  }
}
``