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> {
@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);//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){
if(reactContext!=null){
WritableMap params = Arguments.createMap();
params.putString("from","native");
Log.i(TAG,"Start refresh");
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, "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