关于React Native 的上拉加载组件



  • 在npm逛了一圈,貌似没有好的上拉加载组件,各位有什么好推荐吗。不然自己要想办法桥接了呢

    8天过去了,貌似没有更好的方案,于是自己今天花了大半天去桥接了。还没完善,但是已经可行了。需要下载MJRefresh(小码哥的开源组件)和改动工程下RN的Scrollview.js,请忽略我的代码排版。

    1 引入MJRefresh到React 文件夹下,和Base并列
    2 在RCTScrollView增加
    -(void)endLoadMoreing
    {
    [_scrollView.mj_footer endRefreshing];

    }
    方法并在头文件声明。
    3 RCTScrollView 增加以下属性
    @property(nonatomic,copy)RCTDirectEventBlock onLoadData;
    @property(nonatomic,assign)BOOL isOnLoadingMore;

    -(void)setIsOnLoadingMore:(BOOL)isOnLoadingMore
    {

    _isOnLoadingMore = isOnLoadingMore;

    if (_scrollView.mj_footer.isRefreshing != isOnLoadingMore) {
    if (isOnLoadingMore) {

    if (_scrollView.mj_footer == nil)
    {
    _scrollView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
    }

    [_scrollView.mj_footer beginRefreshing];

    } else {
    [_scrollView.mj_footer endRefreshing];
    }
    }
    }

    #pragma mark - MJ footer
    -(void)loadMoreData
    {
    if (_onLoadMoreData) {
    _onLoadMoreData(@{});
    }
    }

    4 在RCTScrollViewManager增加
    RCT_EXPORT_VIEW_PROPERTY(onLoadMoreData, RCTDirectEventBlock)
    RCT_EXPORT_VIEW_PROPERTY(isOnLoadingMore, BOOL)

    RCT_EXPORT_METHOD(endLoadingMore:(nonnull NSNumber *)reactTag)
    {
    [self.bridge.uiManager addUIBlock:
    ^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, RCTScrollView *> *viewRegistry) {

     RCTScrollView *view = viewRegistry[reactTag];
     if (!view || ![view isKindOfClass:[RCTScrollView class]]) {
       RCTLogError(@"Cannot find RCTScrollView with tag #%@", reactTag);
       return;
     }
     
     [view endLoadingMore];
    

    }];
    }
    5在源码 工程目录下/node_modules/react-native/Libraries/Components/ScrollView.js
    的prototypes添加
    /**

    • load more , add by Robin
      */
      isOnLoadingMore:PropTypes.bool,
      onLoadMoreData:PropTypes.func,

    以及
    endLoadingMore: function() {
    RCTScrollViewManager.endLoadingMore(
    React.findNodeHandle(this)
    );
    },


  • administrators

    listview自带onendreached回调



  • 感谢回复,不过我指的是RCTRefreshControl 这样的组件呢,UIExplorer 里的下拉刷新是 桥接的官方的 UIRefreshControl 。



  • 用 ScrollView 借助RefreshControl就可以实现,官方文件中有示例,我测试过是可以的
    https://facebook.github.io/react-native/docs/refreshcontrol.html



  • @Donny 说:

    https://facebook.github.io/react-native/docs/refreshcontrol.html

    亲,上拉是加载,下拉是刷新。


  • administrators

    @Robin 上拉或下拉提供的都是回调方法,至于方法里面是刷新还是加载,都是你自己实现的



  • 楼主可以参考一下github



  • @sunnylqm 你好,请问这个onendreached回调发生在加载完全部的资源的时候还是说滚动条到底部的时候啊?



  • 此回复已被删除!


  • @Robin 楼主 你最后怎么解决的,那个GiftedListView不太会用啊。



  • @playmusic 那个GiftedListView要怎么用。要不只能点击加载下一页,改了下又是一次全部加载了。



  • @bcbclbc 我自己改RCT的scrollview相关代码啊,然后桥接过去用呗


登录后回复