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

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

React native和原生混编 ListView margin top 20 px_第1张图片
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中加入了以下代码


但是结果还是一样的。但是已经找到了关键字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;
}

再次运行

React native和原生混编 ListView margin top 20 px_第2张图片
Fixed Bug

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

你可能感兴趣的:(React native和原生混编 ListView margin top 20 px)