ios - 在 React-Native 中将 RCTRootView 作为 subview 添加到 rootViewController

Question

如何将 RCTRootView 作为 subview 添加到应用程序 RootViewController 中。

这就是我想要实现的。我有一个 iOS native 应用程序，可以将一些 OpenGLES 内容呈现到 View 上。它显示设备相机提要并跟踪用户面部并在其上显示一些可视化(很像 snapchat AR 滤镜)。这一切都很好，我也有原生的 iOS UIKit 元素。我想在此摄像头源之上覆盖一些 react native UI 元素(删除 UIKit 组件)并实现 UI 功能。

所以我想在 react-native (RCTRootView) 下面有摄像头馈送(即:打开 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];

尝试将其添加为 subview 会导致此

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

灵活的宽高导致了这个

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

在我看来这可能是布局问题？但是我会以错误的方式解决这个问题吗？欢迎任何帮助。

p.s :这就是带有 react-native UI atm 的 AR 相机提要 View 的样子。

p.p.s:如果我不将 RCTRootView 添加为 subview ，那么它将始终处于后台(即相机源将始终位于 react native UI View 之上)

Answer 1

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

// Do *NOT* set reactView.sizeFlexibility

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

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

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