React native和原生混编 ListView margin top 20 px

混编我们共同的痛,这个大家都知道了。在最近的项目中我遇到了这样的问题(在安卓上完全没有此问题)。如图

Margin Top 20px

在这个APP里边只有这个Tab对应的页面是React Native开发的。下面看我的布局代码

container: {
    width:WIDTH,
    height:HEIGHT - 64 - 49,
    backgroundColor: '#F3F3F3'
  },

来解释一下代码WIDTH是当前屏幕的宽度,HEIGHT是当前屏幕的高度,64是导航栏的高度,49是TabBar的高度。
开始google一番找到了这个Fix ScrollView margin-top (20px) bug。然后我在ListView中加入了以下代码

<ListView
   automaticallyAdjustContentInsets={false}
   contentInset={{top:0}}
   dataSource={this.state.dataSource}
/>

但是结果还是一样的。但是已经找到了关键字automaticallyAdjustContentInsets
找到当前页面的ViewController添加以下代码

#import "FTRNViewController.h"
#import "AppDelegate.h"
@interface FTRNViewController ()

@end

@implementation FTRNViewController


-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
}
- (void)viewDidLoad {
    [super viewDidLoad];
  //the key to save the bug: set automaticallyAdjustsScrollViewInsets NO 
    self.automaticallyAdjustsScrollViewInsets = NO;
    self.fd_prefersNavigationBarHidden = YES;
}
//set ViewController view
-(void)loadView
{
    AppDelegate *appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate;
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:appDelegate.bridge moduleName:@"root" initialProperties:@{@"scores":@"what you need"}];
    self.view =  rootView;
}

再次运行

Fixed Bug

如果本文解决了你的问题请回复本文,想统计一下到底多少人遇到这个问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容