博客> 在OC中设置RCTRootView的size等于js组件的原始size(UIView/UIScrollView)
在OC中设置RCTRootView的size等于js组件的原始size(UIView/UIScrollView)
2017-12-13 03:38 评论:0 阅读:706 only_m
ios js ReactNative

主要说明在OC中设置RCTRootView的size等于js组件的原始size,由简到繁举三个例子循序渐进:

第一.UIView

  • 自定义属性 @property (nonatomic, strong) NSURL fileURL; @property (nonatomic, strong) NSString fileName; @property (nonatomic, strong) RCTRootView *rootView;

  • 宏定义宽高

    define kWidth [UIScreen mainScreen].bounds.size.width

    define kHeight [UIScreen mainScreen].bounds.size.height

  • 属性赋值 self.fileURL = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true”]; self.fileName = @"index.ios.bundle”; self.rootView = [[RCTRootView alloc] initWithBundleURL:[[MTDownloader shareFileManager] getFileUrl:self.fileName] moduleName:@"EmbedRNMeituan1" initialProperties:nil launchOptions:nil];(这里使用了一个MTDownLoader,自己封装的一个文件下载存储类) self.rootView.frame = CGRectMake(0, 20, kWidth, 200); self.rootView.delegate = self;(这里要遵循的代理协议是 )

  • 需要实现的代理方法是: // RCTRootViewDelegate代理事件的实现,该事件在rootView的Size发生改变以后执行 ---
    • (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView { rootView.sizeFlexibility = 2; // 设置rootView动态适应组件高度 rootView.frame = CGRectMake(0, 20, kWidth, rootView.intrinsicSize.height); [self.view addSubview:rootView]; }

第二.UIScrollView

  • 在.h文件里声明属性和自定义的初始化方法 @interface RCTScrollViewVC : UIViewController // 滑动视图 @property (nonatomic, strong) UIScrollView scrollView; // 包链接 @property (nonatomic, strong) NSURL bundleURL; // 组件名数组 @property (nonatomic, strong) NSMutableArray *moduleNamesArray; // 自定义初始化方法 // @param bundleURL 包链接 // @param moduleNames 组件名数组 // @return 本类对象

    • (instancetype)initWithBundleURL:(NSURL )bundleURL AndmoduleNamesArray:(NSArray )moduleNames; @end
  • 在.m文件里引入对应的头文件

    import “RCTRootView.h"

    import “RCTRootViewDelegate.h"

    import “MTDownloader.h"

  • 类的延展里声明属性 @interface RCTScrollViewVC () // 存储总的高度值,来确定scrollView的contentSize @property (nonatomic, assign) CGFloat totleHeight; // 存储所有组件对应的rootView @property (nonatomic, strong) NSMutableDictionary *rootViewsDic; // 记录代理方法执行的遍数,RCTRootViewDelegate一共执行三遍,第一遍是old size,第二遍是zero,第三遍是new size @property (nonatomic, assign) NSInteger num; @end // 这里遵循的代理是在后面需要用到的

// 自定义初始化方法的实现 ---

  • (instancetype)initWithBundleURL:(NSURL )bundleURL AndmoduleNamesArray:(NSArray )moduleNames { if (self = [super init]) {

    self.bundleURL = [[NSURL alloc] init];
    self.bundleURL = bundleURL;
    self.moduleNamesArray = [NSArray arrayWithArray:moduleNames].copy;
    self.view.backgroundColor = [UIColor whiteColor];

    } return self; }

// 绘制ScrollView ---

  • (void)drawScrollView {

    self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 20, kWidth, kHeight)]; // self.scrollView.backgroundColor = [UIColor whiteColor]; self.scrollView.backgroundColor = [UIColor clearColor]; self.scrollView.delegate = self; self.scrollView.bounces = NO; self.scrollView.pagingEnabled = NO; self.scrollView.scrollEnabled = YES; self.scrollView.showsHorizontalScrollIndicator = YES; self.rootViewsDic = [NSMutableDictionary dictionary]; for (int i = 0; i < self.moduleNamesArray.count; i++) {

    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:self.bundleURL moduleName:self.moduleNamesArray[i] initialProperties:nil launchOptions:nil];
    rootView.frame = CGRectMake(0, 0, kWidth, 300);
    rootView.delegate = self;
    [self.rootViewsDic setObject:rootView forKey:rootView.moduleName];

    } [self addSubViewToScrollView]; self.scrollView.hidden = YES; }

// 在ScrollView上添加子视图 ---

  • (void)addSubViewToScrollView { self.totleHeight = 20; for (int i = 0; i < self.moduleNamesArray.count; i++) { self.totleHeight += [[self.rootViewsDic objectForKey:self.moduleNamesArray[i]] frame].size.height + 20; } self.scrollView.contentSize = CGSizeMake(kWidth, self.totleHeight); for (int i = 0; i < self.moduleNamesArray.count; i++) {
    RCTRootView rootView = [self.rootViewsDic objectForKey:self.moduleNamesArray[i]]; if (i != 0) { RCTRootView preRootView = [self.rootViewsDic objectForKey:self.moduleNamesArray[i-1]]; rootView.frame = CGRectMake(0, 20 + CGRectGetMaxY(preRootView.frame), kWidth, rootView.frame.size.height); } [self.scrollView addSubview:[self.rootViewsDic objectForKey:self.moduleNamesArray[i]]]; } [self.view addSubview:self.scrollView]; NSLog(@"添加视图"); }

// RCTRootViewDelegate代理事件的实现,根视图的内容更新到一个新的尺寸后调用,新旧尺寸中有任意一个维度等于零,这个方法将不会被调用.代理可以使用这个回调方法去适当调整根视图的内容视图的大小.视图不会自动调整.新的内容尺寸可以通过rootView的IntrinsicSize属性得到 ---

  • (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView {

    rootView.sizeFlexibility = 2; rootView.frame = CGRectMake(0, 0, kWidth, rootView.intrinsicSize.height); [self.rootViewsDic setObject:rootView forKey:rootView.moduleName]; self.num += 1; if (self.num == 3*self.moduleNamesArray.count) {

    [self.scrollView removeFromSuperview];
    [self addSubViewToScrollView];
    self.scrollView.hidden = NO;
    NSLog(@"这是最后一步么?");

    } }

    • 最后在ViewDidLoad方法里调用drawScrollView方法
  • (void)viewDidLoad { [super viewDidLoad];

    [self drawScrollView]; // Do any additional setup after loading the view. }

收藏
1
sina weixin mail 回到顶部