Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
woshi82 opened this issue Jul 11, 2019 · 1 comment
Open

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

woshi82 opened this issue Jul 11, 2019 · 1 comment

Comments

@woshi82
Copy link

woshi82 commented Jul 11, 2019

问题: 如何可以去掉这段空白?(调试了很久,一直没有找到原因,请大佬指教一下^ ^)
如图:
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
Copy link
Author

woshi82 commented Jul 11, 2019

之前调试到这里

// 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 woshi82 changed the title 刷新控件和正文之间有一段空白,有图有代码~请指教 刷新控件和正文之间有一段空白 Jul 11, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant