react-native封装原生下拉刷新组件

之前改进过一个react-native-pull组件解决了iOS上刷新头部出现空白问题，并且将listview改成了flatlist。

github如下：

react-native-pullview这是纯js写的Android&&iOS都可以使用。在iOS上面性能还是可以的，但是在Android上滑动时虽然也可以使用但是总是感觉有点卡顿，不是很如意。

因为rn在Android上滑动事件就不是很流畅，Facebook也一直被这个问题困扰。所以无奈最终只好自己封装一个原生的下拉刷新组件来解决这个问题。

官网为我们提供了封装原生组件的方法和例子但是下拉刷新这个和明显不是一个简单的view而是一个viewgroup（关于封装View参考封装原生View或者rn封装原生jsbridge与H5交互），可是官网上面对于封装viewgroup的例子却并没有呵呵呵呵呵呵！

在各种搜索下终于完成了这个封装。

原生控件使用的是这个SmartRefreshLayout功能很强大用的人也很多。

1：首先集成

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

关键代码:

/**
* Created by wuyunqiang on 2018/1/16.
*/

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

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

@Override
public void addView(SmartRefreshLayout parent, View child, int index) {
super.addView(parent, child, index);
parent.addView(header,0);//设置header
parent.onFinishInflate();//在这个方法里面添加子布局 这里要主动调用否则无法显示下拉刷新内容
}

//发送给RN刷新事件 加载数据
public void refresh(ThemedReactContext reactContext,SmartRefreshLayout refreshlayout){
if(reactContext!=null){
WritableMap params = Arguments.createMap();
params.putString("from","native");
Log.i(TAG,"开始刷新");
if(CanRefresh){
CanRefresh = false;       this.dispatchEvent(reactContext,refreshlayout,"onRefreshReleased",params);
}

}
}

public void dispatchEvent(final ReactContext reactContext,
final SmartRefreshLayout refreshlayout,
final String eventName,
@android.support.annotation.Nullable final WritableMap params) {
if (reactContext==null) {
Log.i(TAG, "reactContext==null");
refreshlayout.finishRefresh();
}else{
Log.i(TAG, "发送消息事件 " +"refreshlayout View id : " + refreshlayout.getId());
Log.i(TAG, "key:" + this.Key+eventName);
//原生模块发送事件
reactContext       .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(this.Key+eventName, params);
}
}

效果如图：非常流畅不会卡顿



完整代码GitHub：AndroidToRN欢迎start