react-native-MJRefresh icon indicating copy to clipboard operation
react-native-MJRefresh copied to clipboard

刷新控件和正文之间有一段空白

Open woshi82 opened this issue 6 years ago • 1 comments

问题: 如何可以去掉这段空白?(调试了很久,一直没有找到原因,请大佬指教一下^ ^) 如图: image image

代码:

// js
import ScrollView from '../../components/MMScrollView'

export default class Chat extends Component {
  render() {
    return (
      <ScrollView
        style={{ flex: 1, backgroundColor: 'yellow' }}
        refreshControl={<MMRefreshControl />}
        reqRefresh={() => {}}
      >
        <View style={{ height: 800, backgroundColor: 'rgba(0, 0, 0, 0.2)', justifyContent: 'center' }}>
          <Text>我是正文我是正文</Text>
          <Text>我是正文我是正文</Text>
          <Text>我是正文我是正文</Text>
          <Text>我是正文我是正文</Text>
        </View>
      </ScrollView>
    )
  }
}

...
...
const RCTMMRefreshView = requireNativeComponent('RCTMMRefreshView', MMRefreshControl)

export default class MMRefreshControl extends Component {
  render() {
    const { onHeaderPulling, onHeaderReleasing, ...props } = this.props
    const nativeProps = { ...props,
      ...{
        onMMRefresh: this._onRefresh,
        onMMPulling: this._onPulling,
        onMMReleaseToRefresh: this._onReleaseToRefresh,
        onMMRefreshIdle: this._onMMRefreshIdle,
        
      }
    }
    return (
      <RCTMMRefreshView
        ref={ref => this.refreshViewRef = ref}
        {...nativeProps}
      >
        <View style={{ height: 130, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center' }}><Text>我是refreshControl</Text></View>
      </RCTMMRefreshView>

    )
  }
}

// Object-C 
// RCTMMRefreshViewManager.m
...
...

-(UIView *)view
{
    header=[RCTMMRefreshHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
    return header;
}

...
...

// RCTMMRefreshHeader.h
@interface RCTMMRefreshHeader : MJRefreshHeader


// MJRefresh/Base/RefreshComponent.h
#import <React/RCTView.h>
#import <React/UIView+React.h>

// MMScrollView 这个控件和 RN 内置的ScrollView 没什么很大变化
// MMScrollView.m   
...
#import "MJRefresh.h"

...
...
- (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
{
  ...
  if ([view isKindOfClass:[MJRefreshHeader class]]){
    _scrollView.mj_header = (MJRefreshHeader *)view;
  }
}
...
...

woshi82 avatar Jul 11 '19 02:07 woshi82

之前调试到这里

// MJRefresh/Base/MJRefreshHeader.m

- (void)placeSubviews
{
    [super placeSubviews];
    
    // 设置y值(当自己的高度发生改变了,肯定要重新调整Y值,所以放到placeSubviews方法中设置y值)
  self.mj_y = - self.mj_h- self.ignoredScrollViewContentInsetTop;
}

不清楚为啥是将refreshControl 向上移动 self.mj_h, 而 scrollView 的 mj_insetT 没有向上移动。

所以现在我目前的做法是 将上面代码的 self.mj_y = - self.mj_h- self.ignoredScrollViewContentInsetTop; 去掉, 在 RCTMMScrollView.m 中加一行代码

//  RCTMMScrollView.m 
- (void)layoutSubviews
{
  ...
  ...
  MJRefreshHeader *mjRefreshHeader = _scrollView.mjRefreshHeader;
    if (mjRefreshHeader && mjRefreshHeader.state == MJRefreshStateIdle) {
        _scrollView.mj_insetT = -mjRefreshHeader.frame.size.height;
    }
}

但是总觉得这样的改法不靠谱,不清楚是不是我原本的代码漏做了什么?

woshi82 avatar Jul 11 '19 03:07 woshi82