React native encapsulates the native pull-down refresh component

Keywords: Android iOS React github


One has been improved before react-native-pull The component solves the blank problem of refreshing the header on iOS, and changes listview to flatlist.
github is as follows:
react-native-pullview This is a pure js written Android & & iOS can be used. The performance is OK on iOS, but it can also be used when sliding on Android, but it always feels a bit stuck, which is not very satisfactory.
Facebook has been plagued by the fact that rn doesn't slide events smoothly on Android. So we have no choice but to encapsulate a native pull-down refresh component to solve this problem.
The official website provides us with methods and examples to encapsulate native components, but the pull-down refresh is obviously not a simple view but a viewgroup Encapsulate native View perhaps rn encapsulates the interaction between native jsbridge and H5 ), but the example of encapsulating viewgroup on the official website is not ha ha ha ha ha ha ha!
Finally, this encapsulation was completed under various searches.
Native controls use this SmartRefreshLayout There are many people who are very powerful.
1: First integration

compile 'com.scwang.smartrefresh:SmartRefreshLayout:1.0.4-7'

Key code:

 * Created by wuyunqiang on 2018/1/16.

public class PullLayout extends ViewGroupManager<SmartRefreshLayout> {
    public String getName() {
        return "PullLayout";

    protected SmartRefreshLayout createViewInstance(ThemedReactContext reactContext) {
        SmartRefreshLayout  refreshLayout = (SmartRefreshLayout) LayoutInflater.from(reactContext).inflate(R.layout.activity_pull,null);
        header = new Header(reactContext);
        return refreshLayout;

    public void addView(SmartRefreshLayout parent, View child, int index) {
        super.addView(parent, child, index);
        parent.addView(header,0);//Set header
        parent.onFinishInflate();//Add a sub layout in this method. Call it actively here, or you will not be able to display the drop-down refresh content

    //Send to RN refresh event load data
    public void refresh(ThemedReactContext reactContext,SmartRefreshLayout refreshlayout){
            WritableMap params = Arguments.createMap();
            Log.i(TAG,"Start refresh");
                CanRefresh = false;       this.dispatchEvent(reactContext,refreshlayout,"onRefreshReleased",params);


    public void dispatchEvent(final ReactContext reactContext,
                              final SmartRefreshLayout refreshlayout,
                              final String eventName,
                      final WritableMap params) {
        if (reactContext==null) {
            Log.i(TAG, "reactContext==null");
            Log.i(TAG, "Send message event " +"refreshlayout View id : " + refreshlayout.getId());
            Log.i(TAG, "key:" + this.Key+eventName);
            //Native module send event
            reactContext       .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                    .emit(this.Key+eventName, params);

The effect is as shown in the figure: very smooth, no jamming

Full code GitHub: AndroidToRN Welcome to start

Posted by timmah22 on Sun, 03 May 2020 05:59:38 -0700