@shenorg/ss_rn_native_pull_refresh/js/refreshHeader.ios.js

React Native 自定义 RefreshControl 组件.

/*
 * @Author: SHEN
 * @Date: 2020-12-04 11:06:53
 * @Last Modified by: SHEN
 * @Last Modified time: 2020-12-16 16:47:35
 */
import React from 'react'
import {requireNativeComponent, NativeModules} from 'react-native'

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

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

  componentWillUnmount() {
    clearRefresh()
  }

  render() {
    const {bgColor, children, height, refreshing, headerHeight, headerComponent, onPull, onStateChange} = this.props
    return (
      <SsRefreshHeader
        refreshing={refreshing}
        onPull={(event) => {
          const {percent, offset} = event.nativeEvent
          onPull && onPull(percent, offset)
        }}
        onStateChange={(event) => {
          const {state} = event.nativeEvent
          onStateChange && onStateChange(state)
        }}
        bgColor={bgColor}
        style={{
          position: 'absolute',
          left: 0,
          top: 0,
          bottom: 0,
          height: headerHeight
        }}>
        {headerComponent}
        {children}
      </SsRefreshHeader>
    )
  }
}

export default RefreshHeader
export {
  beginRefreshing,
  endRefreshing
}