可能是最in的React Native使用原生自定义下拉刷新组件

//自定义的下拉刷新控件
public class PullToRefreshView extends ViewGroup {
    ...
      
    public PullToRefreshView(Context context) {
        ...
    }  
    
    public void setRefreshing(boolean refreshing) {
        ...
    }
    
    public void setOnRefreshListener(OnRefreshListener listener) {
        ...
    }
}

public class SwipeRefreshViewManager extends ViewGroupManager<PullToRefreshView>{
    @Override
    public String getName() {
        return "PtrLayout";
    }

    @Override
    protected PullToRefreshView createViewInstance(ThemedReactContext reactContext) {
        return new PullToRefreshView(reactContext);
    }
    ...
}

public class SwipeRefreshViewManager extends ViewGroupManager<PullToRefreshView>{
    ...
    @Override
    protected void addEventEmitters(ThemedReactContext reactContext, PullToRefreshView view) {
        view.setOnRefreshListener(new PullToRefreshView.OnRefreshListener() {
            @Override
            public void onRefresh() {
                reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher()
                        .dispatchEvent(new PtrRefreshEvent(view.getId()));
            }
        });
    }
  
    @Nullable
    @Override
    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
        return MapBuilder.<String, Object>builder()
                .put("topRefresh", MapBuilder.of("registrationName", "onRefresh"))
                .build();
    }
    ...
}

public class PtrRefreshEvent extends Event<PtrRefreshEvent>{

    protected PtrRefreshEvent(int viewTag) {
        super(viewTag);
    }

    @Override
    public String getEventName() {
        return "topRefresh";
    }

    @Override
    public void dispatch(RCTEventEmitter rctEventEmitter) {
        rctEventEmitter.receiveEvent(getViewTag(),getEventName(),null);
    }
}

public class SwipeRefreshViewManager extends ViewGroupManager<PullToRefreshView>{
    ...
    @ReactProp(name = "refreshing")
    public void setRefreshing(PullToRefreshView view, boolean refreshing) {
        view.setRefreshing(refreshing);
    }
}

public class MainPackage implements ReactPackage {
    ...
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactApplicationContext) {
        return Arrays.asList(new SwipeRefreshViewManager());
    }
    ...
}

'use strict';
import React, {Component, PropTypes} from 'react';
import {View, requireNativeComponent} from 'react-native';
import NativeMethodsMixin from 'react/lib/NativeMethodsMixin';
import mixin from 'react-mixin';
//引用原生下拉刷新控件
const NativePtrView = requireNativeComponent('PtrLayout', PtrView);
//封装一个react组件，该组件中引用了原生控件的实现
class PtrView extends Component {
    static propTypes = {
        ...View.propTypes,
        onRefresh: PropTypes.func,
        refreshing: PropTypes.bool.isRequired
    };

    _nativeRef = (null: ?PtrView);
    _lastNativeRefreshing = false;

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this._lastNativeRefreshing = this.props.refreshing;
    }

    componentDidUpdate(prevProps = {refreshing: false}) {
        if (this.props.refreshing !== prevProps.refreshing) {
            this._lastNativeRefreshing = this.props.refreshing;
        } else if (this.props.refreshing !== this._lastNativeRefreshing) {
            this._nativeRef.setNativeProps({refreshing: this.props.refreshing});
            this._lastNativeRefreshing = this.props.refreshing;
        }
    }
	//渲染原生下拉刷新控件，这里onRefresh就是在ViewManager::getExportedCustomDirectEventTypeConstants 
    //这个函数中 topRefresh 的映射属性。 
    render() {
        return (
            <NativePtrView
                {...this.props}
                ref={ref => this._nativeRef = ref}
                onRefresh={this._onRefresh.bind(this)}/>
        )
    }

    _onRefresh() {
        this._lastNativeRefreshing = true;
        this.props.onRefresh && this.props.onRefresh();
        this.forceUpdate();
    }
}
mixin.onClass(PtrView, NativeMethodsMixin);

export {PtrView};

class Demo1 extends Component {
    ...
    render() {
        return (
            <View style={{flex: 1}}>
                <ListView 
                    ...
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._refresh.bind(this)} />
                    }
                />
            </View>
        )
    }
}

const ScrollView = React.createClass({
    let ScrollViewClass;
    if (Platform.OS === 'ios') {
      ScrollViewClass = RCTScrollView;
    } else if (Platform.OS === 'android') {
      if (this.props.horizontal) {
        ScrollViewClass = AndroidHorizontalScrollView;
      } else {
        ScrollViewClass = AndroidScrollView;
      }
    }
    ...

    const refreshControl = this.props.refreshControl;
    if (refreshControl) {
      if (Platform.OS === 'ios') {
        ...
      } else if (Platform.OS === 'android') {
        // On Android wrap the ScrollView with a AndroidSwipeRefreshLayout.
        // Since the ScrollView is wrapped add the style props to the
        // AndroidSwipeRefreshLayout and use flex: 1 for the ScrollView.
        // 此处就是重点，通过 cloneElement 创建一个新的 ReactElement，而 refreshControl 是通过 props 指定而来并没有写死，Good!
        return React.cloneElement(
          refreshControl,
          {style: props.style},
          <ScrollViewClass {...props} ref={this._setScrollViewRef}>
            {contentContainer}
          </ScrollViewClass>
        );
      }
    }
    return (
      ...
    );
})

class Demo2 extends Component {
    ...
    render() {
        return (
            <View style={{flex: 1}}>
                <ListView 
                    ...
                    refreshControl={
                         //这里为了保证只在Android平台上使用该组件，如果iOS端也有原生控件的实现，
                         //那就不必考虑平台了。
                         Platform.OS === 'android' ? 
                         <PtrView
                              refreshing={this.state.refreshing}
                              onRefresh={this._refresh.bind(this)} />
                         :
                         <RefreshControl
                              refreshing={this.state.refreshing}
                              onRefresh={this._refresh.bind(this)} />
                    }
                />
            </View>
        )
    }
}