@shenorg/ss_rn_native_pull_refresh/js/refreshHeader.android.js

React Native 自定义 RefreshControl 组件.

/*
 * @Author: SHEN
 * @Date: 2020-12-07 22:04:44
 * @Last Modified by: SHEN
 * @Last Modified time: 2020-12-20 13:50:27
 */
'use strict';
import React from 'react'
import {View, Text, requireNativeComponent, NativeModules} from 'react-native'

const SsRefreshLayout = requireNativeComponent('SsRefreshLayout');
const SsRefreshHeader = requireNativeComponent('SsRefreshHeader');
const {beginRefreshing, endRefreshing, clearRefresh} = NativeModules.SsRefreshLayout

class RefreshHeader extends React.PureComponent {
  static defaultProps = {
    enable: true,
    refreshing: false,
    headerHeight: 50
  }

  constructor() {
    super()
    this.onPull = this.onPull.bind(this)
    this.onStateChange = this.onStateChange.bind(this)
    this.state = {
      offsetRef: React.createRef(),
    }
  }

  componentWillUnmount() {
    // clearRefresh()
  }

  onPull(event) {
    const {percent, offset} = event.nativeEvent;
    const {onPull} = this.props
    onPull && onPull(percent, offset)
  }

  onStateChange(event) {
    const {state} = event.nativeEvent;
    const {onStateChange} = this.props
    onStateChange && onStateChange(state)
  }

  render() {
    const {enable, refreshing, children, headerHeight, headerComponent} = this.props
    return (
      <View style={{flex: 1}}>
        <SsRefreshLayout
          style={{flex: 1}}
          enable={enable}
          refreshing={refreshing}
          headerHeight={headerHeight}
          onPull={this.onPull}
          onStateChange={this.onStateChange}>
            <SsRefreshHeader>
              {headerComponent}
            </SsRefreshHeader>
          {children}
        </SsRefreshLayout>
      </View>
    )
  }
}

export default RefreshHeader
export {
  beginRefreshing,
  endRefreshing
}