将RCTRootView作为子视图添加到React-Native

Question

如何将RCTRootView作为子视图添加到应用程序RootViewController。

这就是我想要实现的目标。我有一个iOS原生应用程序，可以将一些OpenGLES内容呈现给视图。它显示设备摄像头馈送并跟踪用户面部并在其上显示一些可视化（非常像Snapchat AR过滤器）。这一切都很好，我也有原生的iOS UIKit元素。我想在这个相机源上叠加一些react-native UI元素（删除UIKit组件）并实现UI功能。

所以我希望在react-native（RCTRootView）下面有摄像头输入（即：open gl view）。大多数情况下都是this link。我几乎做到了，但有一些烦人的布局问题。

默认AppDelegate.m实施

NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings]
jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

RCTRootView *rootView = [[RCTRootView alloc] 
initWithBundleURL:jsCodeLocation moduleName:@"AwesomeProject" initialProperties:nil launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];

尝试将其添加为子视图会导致此

...
//  rootViewController.view = rootView;
[rootViewController.view addSubview:rootView];
...

灵活的宽度和高度导致此

...
//  rootViewController.view = rootView;
rootView.sizeFlexibility = RCTRootViewSizeFlexibilityWidthAndHeight;
[rootViewController.view addSubview:rootView];
...

在我看来，这可能是一个布局问题？但我是否采取了错误的方式？欢迎任何帮助。

p.s：使用具有react-native UI atm的AR相机视图，这就是它的样子。

p.p.s：如果我不将RCTRootView添加为子视图，那么它将始终位于后台（即摄像头输入始终位于反应本机UI视图之上）

Answer 1

我遇到了类似的问题，发现以下组合符合我的喜好：

// Do *NOT* set reactView.sizeFlexibility

reactView.bounds = [[UIScreen mainScreen]bounds]];

reactView.layer.anchorPoint = CGPointMake( 0, 0 );

警告：我正在Ignite上运行，所以不知道这是否适用于flexboxes。