react-native-waterfall-flow/src/WaterfallItem.js

React Native 高性能瀑布流组件

import React from 'react'
import { View } from 'react-native'

export default class WaterfallItem extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      opacity: 0
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (JSON.stringify(this.props) != JSON.stringify(nextProps)) {
      return true
    }
    const { onItemDidUpdate } = this.props
    onItemDidUpdate(0)
    return false
  }


  componentDidUpdate() {
    const { onItemDidUpdate } = this.props
    onItemDidUpdate(1)
  }

  render() {
    const {
      rowIndex,
      rowItem,
      renderItem,
      columnWidth,
      onItemHeightChange
    } = this.props

    const { rowData, rowOffsetTop, height } = rowItem

    const extraStyle = {}
    if (height > 0) {
      extraStyle.height = height
    }
    if (!rowData.some(item => item.height === undefined)) {
      extraStyle.opacity = 1
      this.state.opacity = 1
    }

    return (
      <View style={{ flexDirection: 'row', opacity: this.state.opacity,  ...extraStyle }} key={`row_${rowIndex}`}>
        {
          rowData.map((data, dataIndex) => {
            const { item, index, columnIndex, offsetTop } = data
            return (
              <View
                key={`row_${rowIndex}_item_${dataIndex}`}
                style={{
                  position: 'absolute',
                  top: offsetTop - rowOffsetTop,
                  left: columnIndex * columnWidth,
                  width: columnWidth,
                }}
                onLayout={e => {
                  onItemHeightChange(e.nativeEvent.layout.height, index)
                }}
              >
                {renderItem && renderItem({ item, index, columnIndex })}
              </View>
            )
          })
        }
      </View>
    )
  }
}